常常会有这样子的页面,内容很丰富,页面很长,图片较多。比如说光棍节很疯狂的淘宝商城页面,或者是新浪微博之类。这些页面图片数量多,而且比较大,少说百来K,多则上兆。要是页面载入就一次性加载完毕。乖乖,估计黄花都变成黄花菜了。所以,我们得做点什么,避免这种糟糕的状况发生。

目前很流行的做法就是滚动动态加载,显示屏幕之外的图片默认是不加载的,随着页面的滚动,这个要显示图片的区域进入了浏览器可是窗口范围,则触发图片的加载显示。这种做法的好处是,一是页面加载速度快(浏览器转啊转的圈圈或是进度条很快就玩完了),二是节约了流量,因为不可能每个用户浏览页面时从头滚到尾的。

这是提高前端性能,优化页面加载速度很实用的做法。看上去这种技巧有些技术门槛,其实很简单的。我们需要一个滚动事件,然后判断元素是否在浏览器窗口,然后,显示图片(或是其他元素)就可以啦。网友zhangxinxu在jQuery库下写了个实现此效果的插件,下面就将简单展示讲解此插件的使用以及滚动动态加载的实现。

20160131231631

利用Jquery.ScrollLoading实现图片延迟加载方法:

1、首先,这个功能需要借助jquery插件,是一个比较成型的插件,所以我们需要引入jquery库。

2、其次,需要下载 scrollLoading.js (右键-链接另存为)这个插件到自己的项目中,并且插入到需要使用的页面中。

3、然后,给网页中所有的图片添加一个class,比如就叫scrollLoading吧。

4、同时,吧img图片的url放到img标签的data-url属性上,src设置为一个1像素的透明图片,并设置图片的背景图片为Loading.gif,居中显示不重复,这是为了达到加载时能看到加载动画。

5、最后调用scrollLoading()方法,大功告成。

图片延迟加载Demo:点击浏览

就这么简单,就可以实现图片的延迟加载。是不是很牛逼,更详细说明请访问文章尾的原作者链接。

转自:http://www.zhangxinxu.com/wordpress/?p=1259

发表评论

/ 快捷键:Ctrl+Enter
加载中……