響應式Web中，避免不必要的圖檔加載

@media screen and (min-width:px)and (max-width: px){
/** 樣式處理 */
}
           

在響應式WEB中，經常這樣寫，以保證适應各種分辨率。

頁面往往少不了圖檔（甚至大圖），為了适應最大分辨率，我們會把所有東西都放到頁面上，分辨率低的時候，隐藏元素，或改變某些元素的顯示。

這樣，會有一個問題，就是當螢幕分辨率低的時候，某些大圖雖不顯示，但依然會加載。是以造成資源浪費。

對此情況，我的解決思路是，有可能被隐藏的img元素，在需要<img class=”樣式名” src=”圖檔連結”> 時，以<session class=”樣式名” data-type=”img” src=”圖檔連結” >來替換。

在css 響應式樣式中，設定好響應樣式後，

在頁面dom加載、渲染完成後，需要js來判斷目前這類的session是否顯示，如果顯示，則替換元素，否則不予處理。

js代碼示例(jquery版)

$(function(){
    loadImg();
    });
/**
 * 加載圖檔
 */
function loadImg(){
    var $section=$("section[data-type='img']");
    for(var i=,len=$section.length; i<len; i++){
        var $cur= $($section[i]);
        if($cur.css("display")=="none"){
            console.log("不顯示圖檔");
            continue;
        }
        var href=$cur.attr("data-src");
        var className=$cur.attr("class");
        var html='<img class="'+ className +'" src="'+href +'" />';
        //$cur.html(html);
        $cur.replaceWith(html);
    }
}
           

大家如果有更好的想法，可以一起分享……