4

screen.width < 768 일 때 screen.width > 767data-src-small 일 때 data-src 속성을 사용하고 싶습니다.if + 변수 대 if + else 조건. 어떤 것이 더 현명합니까?

방법 1 :

var src = "data-src"; 

if($(window).width() < 768) { 
    src = "data-src-small"; 
} 
// do something with src variable. 

방법 2 : 나는 마음에 두 가지 방법이 내가 두 번이 상황에 걸쳐 온

if($(window).width() > 768) { 
    var src = "data-src"; 
} 
else { 
    var src = "data-src-small"; 
} 
// do something with src variable. 

. 그래서이 상황이 나중에 나타날 수 있으므로 어떤 방법이 현명한 성과인지를 아는 것이 중요하다고 생각합니다.

편집 :이 질문은 javascript와 관련이 없습니다. 나는 일반적으로 빠른, 변수 재 할당 또는 추가 조건이 else에서 평가된다는 것을 의미합니까? 같은 상황은 다음과 같이 너무 C 언어에있을 수 있습니다 :

string salary; 
... 
... 
salary = "LOW"; 
if(person == "RICH") { 
    salary = "HIGH"; 
} 

방법 2 : 대답은 컴파일러 나 언어에 따라 달라집니다 경우 javascript 언어와 gcc-에 대한 크롬의 V8 엔진에 대한 답변하시기 바랍니다

string salary; 
... 
... 
if(person == "RICH") { 
    salary = "HIGH"; 
} 
else { 
    salary = "LOW"; 
} 

C 언어 용 4.9.2 컴파일러. 감사합니다

+0

방법 2가'로 작성하는 경우 ($ (창) .width 할 수있는 JS 또는 CSS를 필요로하지 않는 제 3 회 방법을 제안 768) {var src = "data-src"; 반환; } var src = "data-src-small"; ' – Roberrrt

+1

이것이 바로 CSS 클래스입니까? 미디어 쿼리가 더 나은 선택이 아닌가? – Kiogara

+0

@ 네가 맞다. 댓글이 삭제되었습니다. – taguenizy

답변

3

나는>) (

<picture> 
 
    <source media="(min-width: 768px)" srcset="https://dummyimage.com/600x400/000/f00&text=big"> 
 
    <source media="(max-width: 768px)" srcset="https://dummyimage.com/300x200/000/fff&text=small"> 
 

 
    <!-- fallback if browser don't understand picture element --> 
 
    <img src="https://dummyimage.com/600x400/000/0f0&text=small" alt="kitten-curled"> 
 
</picture>

+0

그러나 이것은 IE 브라우저 및 다른 오래된 브라우저에서 문제가 될 수 있습니다. – user31782

+3

IE에는 아무런 문제가 없습니다. 이것은 IE 용으로 새끼 고양이 웅크 리기를 보여줍니다 ... 이것은 점진적 향상입니다. 이해하는 선량은 그곳에서 가장 좋은 해결책을 얻을 것입니다. 오래된 IE 사용자는 비난받을 자만이 있습니다. (비디오를 개발할 때와 Flash 객체를 넣을 때 같지만 '

+0

던져 넣기 'max-width 100 %'와 같은 CSS가 조금 있습니다. – Endless

관련 문제