响应式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);
    }
}
           

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