服务器图片加载慢_页面提高性能利器_懒加载

哈喽，艾瑞巴蒂，现在搜狗商城产品需求已经趋于稳定，已经开始逐步的着手进行页面的性能提升工作。这不最近小编正在进行“页面懒加载需求”的功能测试。小编第一次听说这个名词，让我们一起了解下吧 

什么是懒加载？

通常的说懒加载也就是延迟加载。 
当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次，俗称占位图)，只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。

懒加载的原理是什么？

页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，把正真的路径存在元素的“data-url”(这个名字起个自己认识好记的就行)属性里，要用的时候就取出来，再设置；

为什么要使用懒加载？

很多页面，内容很丰富，页面很长，图片较多。比如说搜狗商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。要是页面载入就一次性加载完毕。估计大家都会等到黄花变成黄花菜了。其实总结来说就是”减少或延迟请求数，缓解浏览器的压力，增强用户体验。”

懒加载的实现步骤？

• 首先，不要将图片地址放到src属性中，而是放到其它属性(data-original)中。

• 页面加载完成后，根据scrollTop判断图片是否在用户的视野内，如果在，则将data-original属性中的值取出存放到src属性中

• 在滚动事件中重复判断图片是否进入视野，如果进入，则将data-original属性中的值取出存放到src属性中。

懒加载的优点是什么？

页面加载速度快、可以减轻服务器的压力、节约了流量，用户体验好

如何代码实现？

//写一个函数判断元素是否出现

function isVisible($node){

var winH = $(window).height(),scrollTop = $(window).scrollTop(), offSetTop = $(window).offSet().top;

if (offSetTop < winH + scrollTop) {

return true;

} else {

return false;

}

}

//再添加上浏览器的事件监听函数，让浏览器每次滚动就检查元素是否出现在窗口可视范围内：

$(window).on("scroll", function{

if (isVisible($node)){

console.log(true);

}

})

//通过打印判断是否生效

var hasShowed = false; $(window).on("sroll",function{

if (hasShowed) {

return;

} else {

if (isVisible($node)) {

hasShowed = !hasShowed; console.log(true);

}

}

})

如何测试呢？

关注开发改动

查看开发改动确定测试范围 

• 页面框架_导航内子菜单商品图

• 首页_主要内容区域所有图片

• 分类页_主要内容区域所有图片

• 详情页_商品详情、评价商品、头像图片、热门推荐功能

• 个人中心_订单图片

• 文章导购_文中的商品图片

• 购物车_商品列表

以上就是通过代码log确定的影响功能点

实施测试

小编这里使用的Fiddler工具

• 关注改动模块的正常功能正常使用

• 慢网络时，图片加载情况(Fiddler模拟)

• 断网时，图片加载情况(Fiddler模拟)

文中涉及知识点

1. Fiddler成长之路 - 如何批量修改请求信息

2. Fiddler(七) |QuickExec

3. Fiddler(六)|session快捷图标

4. Fiddler大师之路系列(五)

5. Fiddler大师之路系列(四)

6. Fiddler大师之路系列(三)

7. Fiddler大师之路系列(二)

8. Fiddler大师之路系列(一)

欢迎添加我们的搜狗测试微信号，与我们一起聊聊测试。