の場合のHTML属性の制御

Question

私のimgは3つの属性を持っていますが、1つの属性（data-web-src、,data-mobil-src）

please click to see on codepen

function noLazyImages(e) { 
 
    $(e + '.lazy_res').attr('src', function(_, oldSrc) { 
 
    var elData = $(this).data(), 
 
     winWidth = $(window).width(); 
 
    if (winWidth >= 768 && winWidth < 960) { 
 
     return elData['webSrc'] 
 
    } else if (winWidth < 768 && winWidth >= 480) { 
 
     return elData['tabletSrc'] 
 
    } else if (winWidth < 480) { 
 
     return elData['mobilSrc'] 
 
    } else if (winWidth > 960) { 
 
     return elData['webSrc'] 
 
    } 
 
    }) 
 
} 
 

 
$(document).ready(function() { 
 
    noLazyImages("body img"); 
 
})

img { 
 
    width: 300px; 
 
}

<img class="lazy_res" data-web-src="http://image.prntscr.com/image/bdf1d94b64104ef2acd2ceee19882cd1.jpg" data-mobil-src="http://image.prntscr.com/image/caa51ab4900448589201207e57b2630f.jpg" data-tablet-src="http://image.prntscr.com/image/4b2862a292b543139daa7805a58c17fd.jpg" 
 
/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

私は、次のコードは、あなたがやりたいと思います。

質問スニペットにあるimgタグからdata-tablet-srcを削除しました。これにより、両方を実行して結果を比較できるようになりました。

ロジック

if(elData['tabletSrc'])elData['tabletSrc']が存在しない場合はfalseになります。だから代わりにreturn elData['webSrc']を返します。

function noLazyImages(e) { 
 
    $(e + '.lazy_res').attr('src', function(_, oldSrc) { 
 
    var elData = $(this).data(), 
 
     winWidth = $(window).width(); 
 
    if (winWidth < 768 && winWidth >= 480) { 
 
    \t if(elData['tabletSrc']){ 
 
     \t return elData['tabletSrc']; 
 
     } 
 
    } else if (winWidth < 480) { 
 
     if(elData['mobilSrc']){ 
 
     \t return elData['mobilSrc']; 
 
     } 
 
    } 
 
    return elData['webSrc']; 
 
    }); 
 
} 
 

 
$(document).ready(function() { 
 
    noLazyImages("body img"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img class="lazy_res" data-web-src="http://image.prntscr.com/image/bdf1d94b64104ef2acd2ceee19882cd1.jpg" data-mobil-src="http://image.prntscr.com/image/caa51ab4900448589201207e57b2630f.jpg" 
 
/>

Answer 2

あなただけのイベントのサイズを変更するウィンドウにリスナーを追加する必要があなたのスクリプトの作業罰金：

$(document).ready(function() { 
    noLazyImages("body img"); // on Document ready 

    $(window).resize(function() { 
    noLazyImages("body img"); // on window Resize 
    }); 

})