jQuery实现图片和iframe等延迟加载

对于电子商务进入优化阶段，由于过多的图片加载，给网站带来过度的负载，影响了访问速度。接下来我将介绍一个基于jQuery的插件来处理这些问题，

这个插件就是jquery.scrollLoading.js。

一下是插件源码：

/*
 * jquery.scrollLoading.js
 * 2010-11-19 v1.0
*/
(function ($) {
    $.fn.scrollLoading = function (options) {
        var defaults = {
            attr: "data-url"
        };
        var params = $.extend({}, defaults, options || {});
        params.cache = [];
        $(this).each(function () {
            var node = this.nodeName.toLowerCase(), url = $(this).attr(params["attr"]);
            if (!url) { return; }
            //重组
            var data = {
                obj: $(this),
                tag: node,
                url: url
            };
            params.cache.push(data);
        });

        //动态显示数据
        var loading = function () {
            var st = $(window).scrollTop(), sth = st + $(window).height();
            $.each(params.cache, function (i, data) {
                var o = data.obj, tag = data.tag, url = data.url;
                if (o) {
                    post = o.position().top;
                    if (post < 10)
                        post = o.offset().top;
                    posb = post + o.height();

                    if ((post > st && post < sth) || (posb > st && posb < sth)) {
                        //在浏览器窗口内

                        if (tag === "img") {
                            //图片，改变src
                            o.attr("src", url);
                        } else if (tag == "iframe") {
                            o.attr("src", url);
                        } else if (tag == "span") {                          
                            eval(url);
                        }
                        else {
                            o.load(url);
                        }
                        data.obj = null;
                    }
                }
            });
            return false;
        };

        //事件触发
        //加载完毕即执行
        loading();
        //滚动执行
        $(window).bind("scroll", loading);
    };
})(jQuery);

引用方法：

$(function(){ $('img').scrollLoading(); });

注意html文件：

<img data-url="http://xxx.com/898.jpg.167_167.jpg"  style="backgound:url(http://www.mb5u.com/uploads/sucai/2008825893756277801.gif) no-repeat center;" align="absmiddle"  width="167" height="167"/>  

属性data-url 必须有而且url为图片实际地址