响应式Web中，避免不必要的图片加载

@media screen and (min-width:650px)and (max-width: 960px){/** 样式处理 */}

在响应式WEB中，经常这样写，以保证适应各种分辨率。

页面往往少不了图片（甚至大图），为了适应最大分辨率，我们会把所有东西都放到页面上，分辨率低的时候，隐藏元素，或改变某些元素的显示。

这样，会有一个问题，就是当屏幕分辨率低的时候，某些大图虽不显示，但依然会加载。因此造成资源浪费。

对此情况，我的解决思路是，有可能被隐藏的img元素，在需要<img class=”样式名” src=”图片链接”> 时，以<session class=”样式名” data-type=”img” data-src=”图片链接” >来替换。
在css 响应式样式中，设置好响应样式后，
在页面dom加载、渲染完成后，需要js来判断当前这类的session是否显示，如果显示，则替换元素，否则不予处理。
js代码示例(jquery版)

$(function(){    loadImg();    });/** * 加载图片 */function loadImg(){    var $section=$("section[data-type='img']");    for(var i=0,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);    }}

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