1.关于滚动显示加载
经常出现这样的页面，内容丰富，页面较长，图片较多。 比如疯狂光棍节的淘宝商城页面。
或者是前段时间买高端麦克风的京东页面，或者是新浪微博。
这些页面上的图片很多，而且都比较大，至少有几百K，多的有兆多字节。 如果页面加载完毕，就会一次性加载完毕。 嘿，我猜所有的黄花都变成了黄花菜。 因此，我们必须采取一些措施来避免这些不好的情况发生。 目前流行的方法是滚动动态加载。 默认不加载显示屏以外的图片。 随着页面的滚动，显示图片的区域进入浏览器和窗口范围，触发图片的加载和显示。 这种方式的好处在于，一是页面加载速度快（浏览器转圈或者进度条很快就完），二是节省流量，因为不可能每个用户都从页面开始滚动。从浏览页面时开始一直到结束。
看来我前面提到的几个网站都采用了这些方法。 比如，淘宝商城首页已触发滚动加载且尚未加载的图片以迅雷不及掩耳之势被剪切出来：
这是提高后端性能和优化页面加载速度的非常实用的方法。 看似这些方法都有一定的技术门槛，但其实很简单。 我们需要一个滚动风暴，然后判断该元素是否在浏览器窗口中，然后只显示图片（或其他元素）。 我在jQuery库下写了一个插件来实现这个效果。 下面简单讲解一下这个插件的使用以及滚动动态加载的实现。
二、jQuery滚动加载插件scrollLoading
虽然只有几十行代码，但是为了方便我把它做成了插件。 该插件名为jquery.scrollLoading.js，您可以点击这里下载（右键-【目标|链接】另存为），或者点击这里下载迷你压缩版。
演示
你可以硬点这里：jQuery滚动加载图片等demo，如果你的网速在贫困线上挣扎，可以慢慢拖动滚动条，可以清晰地看到滚动加载的效果； 如果你的网速很挣扎，速度让你骄傲，兄弟，你需要快速拖动滚动条来扫描效果。 效果类似如下：
虽然演示页面中有一段HTML破坏了和谐，但那是动态加载HTML后的疗效。 也就是说这个scrollLoading可以用来滚动加载图片，也可以用来ajax加载页面。
3.scrollLoading的使用
不管怎样jquery滚动页面，先调用jQuery库文件，还有jquery.scrollLoading.js，就可以直接在页面某处添加如下代码：
这个插件的方法名是scrollLoading，所以，直接：wrapper.scrollLoading(); 可以实现滚动加载的效果，简单。 如下：
$(".scrollLoading").scrollLoading();
表示所有类为scrollLoading的元素都绑定滚动加载。
当然，事情不可能真的这么简单，我们还需要做一些小技巧。 元素默认是不加载的，所以真正的加载地址必须提前放在元素上。 例如jquery滚动页面，新浪微博默认将头像地址绑定到自定义的“dynamic-src”属性上，如右图所示：
在HTML5中，所有以data-开头的自定义属性都是合法的，地址可以是图片、页面等。因此，我将绑定地址的自定义属性设置为“data-url”，并设置了这个值属性为真实图像（或页面）地址。 例如下面的例子：
加载中...
将在滚动时加载一个名为loaded.html的页面并手动替换上述内容。
对于常用的图片，还有一个小问题，就是默认的src图片地址。 它的src地址不能是真实的图片地址（否则会一下子加载完），也不能是空地址或者坏地址，否则在IE浏览器下会出现可怕的红十字。
。 我的做法是默认链接是1px * 1px的gif透明图片（尺寸较小），同时可以显露出之前加载的gif动画图片，在滚动加载时直接替换这张gif图片。 因此，对于图片来说，可能会有类似下面的代码：
四、scrollLoading可选参数
scrollLoading是一个非常简单的小插件（没有注释的YUI压缩器min版本只有508B），所以参数很少，只有一个，见下表：
参数默认解释
属性
数据网址
获取元素加载地址的属性名
就这样。 该插件仅适用于动态加载页面默认滚动条。 不支持像内部 div 那样的滚动加载。
五、周五总结
去上班了，真好！
明天放假我要去钓鱼。
我发烧了，鼻子流个不停，浑身不舒服。
空间最近升级了，每月20G的流量早已难以承受。
我最近看了很多漫画。
我决定在RSS上添加一些广告、评论链接等。
//zxx：主人，这是你经历过的最肮脏的尾声。
好吧，我抬起左腿同意这一点。
原创文章，转载请注明出自张鑫旭-鑫空间-鑫生活[]
发表评论