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

93 阅读 0 评论 62 点赞

我是靠谱客的博主落寞猎豹，这篇文章主要介绍响应式Web中，避免不必要的图片加载，现在分享给大家，希望可以做个参考。

复制代码

1
2
3
@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版)

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(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);
}
}