妙用jquery.scrollLoading.js插件,加快网页的显示速度
[文章作者:磨延城 转载请注明原文出处: https://mo2g.com/view/100/ ]
这篇文章介绍的js插件是基于jQuery开发的,它的功能如下:用户打开网页的时候,浏览器先加载能看得到的界面(第一屏)中的图片,第二屏、第三屏或者更下边的图片只有等到用户往下拖动滚动条,浏览器才会依次加载.这样的外部资源加载机制,能让浏览器更快的展示内容.问:为什么浏览器不使用这样的加载机制?
这篇文章介绍的js插件是基于jQuery开发的,它的功能如下:用户打开网页的时候,浏览器先加载能看得到的界面(第一屏)中的图片,第二屏、第三屏或者更下边的图片只有等到用户往下拖动滚动条,浏览器才会依次加载。这样的外部资源加载机制,能让浏览器更快的展示内容。问:为什么浏览器不使用这样的加载机制?
插件网址:jQuery滚动加载插件scrollLoading
图片按需加载的使用方法,作者在文中已经说明的很清楚了,我就不啰嗦了。下边就说说,我是怎么修改jquery.scrollLoading.js插件,让iframe框架中的内容也能按需加载的。
因为我的博客使用了新浪微博的提供的API接口,展示了微博内容,所以页面中加载了一定量的外部资源,有js、css、图片等等,细数下来,一共加载了20多个来新浪的外部资源。这么多的外部资源,如果在传送的过程中出问题了或延时了,会不同程度的影响页面的展示。后来分析了scrollLoading插件的代码,发现只要稍微修改一下,就能支持iframe框架按需加载了!
if (url) { //在浏览器窗口内 if (tag === "img") { //图片,改变src callback(o.attr("src", url)); } else { o.load(url, {}, function() { callback(o); }); } } else { // 无地址,直接触发回调 callback(o); }
第三行代码决定了scrollLoading插件只支持img标签实现按需加载,为了要支持iframe标签,要做的修改如下:
if (tag === "img" || tag === "iframe") {
保存即可。
因为插件默认是读取data-url中的数据,替换到src中,所以我使用如下方法调用插件,供大家参考。
$('img[data-url],iframe[data-url]').scrollLoading();
我来说两句: