妙用jquery.scrollLoading.js插件,加快网页的显示速度

这篇文章介绍的js插件是基于jQuery开发的，它的功能如下：用户打开网页的时候，浏览 器先加载能看得到的界面（第一屏）中的图片，第二屏、第三屏或者更下边的图片只有等到用户往下拖动滚动条，浏览器才会依次加载。这样的外部资源加载机制， 能让浏览器更快的展示内容。问：为什么浏览器不使用这样的加载机制？

插件网址：jQuery滚动加载插件scrollLoading

图片按需加载的使用方法，作者在文中已经说明的很清楚了，我就不啰嗦了。下边就说说，我是怎么修改jquery.scrollLoading.js插件，让iframe框架中的内容也能按需加载的。

因 为我的博客使用了新浪微博的提供的API接口，展示了微博内容，所以页面中加载了一定量的外部资源，有js、css、图片等等，细数下来，一共加载了20 多个来新浪的外部资源。这么多的外部资源，如果在传送的过程中出问题了或延时了，会不同程度的影响页面的展示。后来分析了scrollLoading插件 的代码，发现只要稍微修改一下，就能支持iframe框架按需加载了！

1 2 3 4 5 6 7 8 9 10 11 12 13 14

if (url) {     //在浏览器窗口内     if (tag === "img") {         //图片，改变src         callback(o.attr("src", url));             } else {         o.load(url, {}, function() {             callback(o);         });     }         } else {     // 无地址，直接触发回调     callback(o); }

第三行代码决定了scrollLoading插件只支持img标签实现按需加载，为了要支持iframe标签，要做的修改如下：

1	if (tag === "img" || tag === "iframe") {

保存即可。

因为插件默认是读取data-url中的数据，替换到src中，所以我使用如下方法调用插件，供大家参考。

1	$('img[data-url],iframe[data-url]').scrollLoading();

好消息！ 现在订阅阿飞博客，立即赠送最新最好最有价值的资源给你!
第一步：点击这里
第二步：输入您的QQ邮箱
第三步：登陆QQ邮箱，点击确认连接
第四步：成功订阅

　　如果感觉本文章对你有价值，可按您心情自愿付费： 支付宝 [e-mail] 曾德飞
　　除非注明，文章均为( 阿飞博客 )原创，转载请保留链接: http:///434.html

订阅公众号：diqiujiayuancom　站长微信(QQ)：81531444