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

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

最后

以上就是落寞猎豹为你收集整理的响应式Web中，避免不必要的图片加载的全部内容，希望文章能够帮你解决响应式Web中，避免不必要的图片加载所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。