PDF《网站优化：图片异步加载》

网站优化:图片异步加载 随着网站的文章越来越多,网站的图片也不知不觉的多了起来,图片多起来带来的问题就是 访问的人多的时候会导致页面加载速度越来越慢,这严重影响了网站的用户体验,所以网站图片 异步加载势在必行.

图片异步加载就是图片只有在视野范围内才加载,没出现在范围内的图片就暂不加载,等用 户滑动滚动条时再逐步加载.当然第一想到的就是去网站上寻找相应的插件,我找到一个名为laz yload.js的插件,它是一款jQuery的插件,全称是jquery.lazyload.js,当时把网站的所有图片按照l azyload.js插件要求设置好,但是我发现了有个bug,就是我博客右侧的高度如果小于左侧太多, 会导致右侧的部分图片一直无法加载,不管你怎么移动浏览器滑动条,就是不加载!于是只能换 别的插件了,我在网上找到一款名为asyncLoad.js的异步加载插件,这个插件是个人写的,试了 一些能够解决lazyload.js插件出现的问题,但是有一点我不满意的是asyncLoad.js插件在图片还没 加载的时候没有图片占位符,看起来像下面一样: 对于我这种"强迫症"的人来说肯定不行,那咋办呢?于是只能自己弄了,经过研究,最终还是弄 好了.我在asyncLoad.js里面加了一个名为placeholder的参数,这个参数可以设置默认的图片占 位符,也就是图片在加载之前会显示这个占位符.完整的代码如下: (function(a) { a.fn.scrollLoading = function(b) { var c = {

1 /

5 attr: "data-url", placeholder: "data:image/gif;

base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAA EAAAICTAEAOw==", container: a(window), callback: a.noop };

var d = a.extend({}, c, b || {});

d.cache = [];

a(this).each(function() { var h = this.nodeName.toLowerCase(), g = a(this).attr(d.attr);

if (a(this).attr("src") === undefined || a(this).attr("src") === false) { if (a(this).is("img")) { a(this).attr("src", d.placeholder);

} } var i = { obj: a(this), tag: h, url: g };

d.cache.push(i) });

var f = function(g) { if (a.isFunction(d.callback)) { d.callback.call(g.get(0)) } };

var e = function() { var g = d.container.height();

if (d.container.get(0) === window) { contop = a(window).scrollTop() } else { contop = d.container.offset().top } a.each(d.cache, function(m, n) { var p = n.obj, j = n.tag, k = n.url, l, h;

if (p) { l = p.offset().top - contop, h = l + p.height();

if ((l >=

0 && l < g) || (h >

0 && h