第一次本身寫jquery圖片延遲加載插件，不通用，但修改一下仍是可使用到不少頁面上的

不斷修改完善中……

 

/*!
* jquery.lazyoading.js
*自定義的頁面圖片延遲加載插件，比網上的jquery.lazyload簡單，也更適合本身的網站
*使用方法：
把img 的class加上 lazyloading
而後先引用jquery，再引用jquery.lazyoading.js，再調用：$("img.lazyloading").lazyloading({loadfirst:true});
* by pukuimin
* 2013-11-01
*2013-11-08 解決了圖片沒有指定高度的問題
*2013-11-14 解決了沒有指定高度加載圖片以後有間隔的問題
*/
/// <reference path="jquery-1.8.2.min.js" />
(function ($) {
    $.fn.lazyloading = function (options) {
        var defaults = {
            preyimg: "/Content/images/Imgpreview/grey.gif",
            picpath: "data-original",
            container: $(window),
            loadfirst: false, //進入頁面後是否加載當前頁面的圖片
            defaultHeightID: "lazyloadingHeight"//頁面上默認高度的input標籤id
            //imgPaddingID: "lazyloadingPadding"//img的padding值
        };
        var params = $.extend({}, defaults, options || {});
        params.cache = [];
        $(this).each(function () {
            var node = this.nodeName.toLowerCase(), url = $(this).attr(params["picpath"]), preyimg = params["preyimg"];
            var defaultheight = $("#" + params["defaultHeightID"]).val(); //, padding = $("#" + params["imgPaddingID"]).val(); //
            //重組
            var data = {
                obj: $(this),
                tag: node,
                url: url,
                preyimg: preyimg,
                defaultheight: defaultheight
            };
            params.cache.push(data);
        });

        var init = function () {
            $.each(params.cache, function (i, data) {
                var thisImg = data.obj, tag = data.tag, url = data.url, preyimg = data.preyimg;
                if (typeof (url) != "undefined")// 判斷是否須要延遲加載
                {
                    var parent1 = thisImg.parent(); //a
                    var Inner = null; //
                    if (parent1.is("a") == true) {//img wrap by a
                        Inner = parent1;
                    }
                    else {
                        Inner = thisImg;
                    }
                    var width = thisImg.attr("width") || thisImg.css("width");
                    var height = data.defaultheight || thisImg.css("height");
                    //if (i == 0) alert(data.defaultheight);
                    var attrheight = thisImg.attr("height");
                    if (attrheight != null) height = attrheight;
                    if (width != null && width.indexOf("px") > -1) width.replace("px", "");
                    if (height != null && height.indexOf("px") > -1) height.replace("px", "");
                    var divstr = "<div class='.loading' style='text-align: left;position:relative;float:left;width:" + width + "px;";
                    var HasHeight = true; //圖片是否指定了高度
                    divstr = divstr + "height:" + height + "px;";
                    if (attrheight == null || attrheight == "") {
                        HasHeight = false;
                    }

                    thisImg.css("position", "relative");

                    divstr = divstr + "' ></div>"
                    //修正外層div：text-align的影響
                    Inner.wrap(divstr);
                    //修正img外面不是a標籤時parent()已經改變的問題
                    parent1 = thisImg.parent();
                    if (HasHeight == true) { parent1.attr("lazyloading_hasheight", "1"); } //是否指定了高度
                    else { { parent1.attr("lazyloading_hasheight", "0"); } }

                    parent1.append("<img class='loadhiddenimg' width='0' height='0' src='' />");
                    thisImg.attr("src", preyimg);
                    thisImg.removeAttr("width").removeAttr("height");
                    thisImg.attr("width1", width).attr("height1", attrheight);

                    ////thisImg.attr("width", "50px").attr("height", "50px"); //loading圖大小
                    //thisImg.css("margin", "0 auto");
                    thisImg.css("margin", ((height / 2) - 25) + "px auto auto " + ((width / 2) - 25) + "px");
                    $(".lazyloading").css("display", "table"); //.css("position", "relative");
                }
            });
        }
        //動態顯示數據
        var loading = function () {
            //窗口的高度+看不見的頂部的高度=屏幕低部距離最頂部的高度
            var thisButtomTop = parseInt($(window).height()) + parseInt($(window).scrollTop());
            var thisTop = parseInt($(window).scrollTop()); //屏幕頂部距離最頂部的高度

            $.each(params.cache, function (i, data) {
                var thisImg = data.obj, tag = data.tag, url = data.url, post, posb;

                if (thisImg) {//對象不爲空
                    if (typeof (url) != "undefined") {// 判斷是否須要延遲加載
                        var PictureTop = parseInt(thisImg.offset().top);
                        //若是處理可見範圍內，而且原圖地址data-original不等於src,則加載圖片
                        if (PictureTop >= thisTop && PictureTop <= thisButtomTop && thisImg.attr("data-original") != thisImg.attr("src")) {
                            var hiddenImg = thisImg.siblings("img.loadhiddenimg");

                            hiddenImg.load(function () { //隱藏圖片加載完以後的回調函數
                                var width = thisImg.attr("width1");
                                var height = thisImg.attr("height1");
                                thisImg.attr("width", width).attr("height", height);
                                thisImg.removeAttr("width1").removeAttr("height1");
                                thisImg.css("margin", "0 auto");
                                if (thisImg.parent().attr("lazyloading_hasheight") == "0") {//沒有指定高度時，加載圖片後去掉div高度自適應
                                    if (thisImg.parent().is("a") == true) {
                                        thisImg.parent().parent().css("height", "");
                                    }
                                    else {
                                        thisImg.parent().css("height", "");
                                    }
                                }
                                thisImg.load(function () {
                                    if (thisImg.parent().is("a") == true) {
                                        thisImg.parent().parent().css("height", thisImg.height());
                                    }
                                    else {
                                        thisImg.parent().css("height", thisImg.height());
                                    }
                                });
                                thisImg.attr("src", hiddenImg.attr("src"));
                            }).error(function () {
                                thisImg.attr("src", hiddenImg.attr("src")); //alert("error");
                            });
                            hiddenImg.attr("src", url);
                        }
                    }
                }
            });
        };
        //初始化
        init();
        //事件觸發
        //加載完畢即執行
        if (params["loadfirst"] == true) loading();
        //滾動執行
        params.container.bind("scroll", loading).bind("resize", loading);
    };
})(jQuery);

 

 

查看效果：http://architecture.kinpan.com/