jquery lazyload插件的改进

        jquery lazyload插件是一个实现图片延迟加载的插件，主要原理是通过先替换图片src，然后在页面滚动时判断图片所处位置在不在可视范围内，来实现延迟加载。

        实际中我们还经常用到延迟加载页面，比如一个div，要实现在页面滚动时，若div所处位置在可视范围内，就延迟load一个url。这时就有需要对 div进行lazyload。

        我对jquery的lazyload作了一下改进，让它支持对div调用jquery的ajax load的延迟加载。并多支持额外的几个option参数。

preloadTimeout：毫秒数。由于div.load有时比较长时间，数据量较大，在页面载入时比较卡。这个参数指示刚进入页面时，每隔多少毫秒lazyload一次。

delay: 毫秒数。这个参数指数所有lazyload的额外延迟。这个参数不是当元素在页面上停留多久后才lazyload（可能需要非常复杂的判断，需要大改。），用处不大。

success: 函数。只有一个参数为调用这次lazyload的那一个元素。

        以下例子中，这个图片是作为空图片放置的（在没加载时放入div中，或替换img的src）。 目前仅支持div和img元素。

        下面是以下例子的调用：

$(".toload").mylazyload({
   preloadTimeout: 1000,
   delay: 1000,
   placeholder: "/Emoticons/baimantou/202015214.gif",
   success:function(t) {
       var imgs = $("img", t);
       for (var i = 0; i < imgs.length; i++) {
           //cnblogs上的表情图片地址前没有"/",所以在这里加上。
           imgs.eq(i).attr("src", "/" + imgs.eq(i).attr("src"));
       }
    }
});

 

 

1

2

3

1

2

3

1

2

3

1

2

3

4

5

6

1

2

3

4

5

6

1

2

3

4

5

6