JQuery圖片載入顯示loading和載入失敗預設圖片

標籤：dstat   object   row   jpg   http   tail   圖片載入   lock   時間   

 在很多時候我們需要用到圖片載入功能，在網上搜資料後就想為了以後使用方便重新整理了下，結果

   最後一張是載入失敗顯示的圖片，沒找到合適的圖片，先用他頂替。

頁面引用

<div class="container">    <div class="row block" id="img-list">        <div class="col-md-3">            <img src="/Assets/OnePiece/1.jpg" class="img-thumbnail">        </div>        <div class="col-md-3">            <img src="/Assets/OnePiece/2.jpg" class="img-thumbnail">        </div>        <div class="col-md-3">            <img src="/Assets/OnePiece/3.jpg" class="img-thumbnail">        </div>        <div class="col-md-3">            <img src="/Assets/OnePiece/4.jpg" class="img-thumbnail">        </div>        <div class="col-md-3">            <img src="/Assets/OnePiece/5.jpg" class="img-thumbnail">        </div>        <div class="col-md-3">            <img src="/Assets/OnePiece/6.jpeg" class="img-thumbnail">        </div>        <div class="col-md-3">            <img src="/Assets/OnePiece/7.jpg" class="img-thumbnail">        </div>        <div class="col-md-3">            <img src="/Assets/OnePiece/8.jpg" class="img-thumbnail">        </div>    </div></div><script src="~/Scripts/ImgLoading/ImgLoading.js"></script><script>    $("#img-list").ImgLoading({        errorimg: "/Scripts/ImgLoading/images/noimage.png",        loadimg: "/Scripts/ImgLoading/images/load.gif",        timeout: 800    });</script>

 

下面是外掛程式指令碼，為了突出載入的效果就加上了延遲時間。

;(function ($) {    $.fn.extend({        ImgLoading: function (options) {            var defaults = {                errorimg: "http://www.oyly.net/Images/default/Journey/journeydetail.png",                loadimg: "http://www1.ytedu.cn/cnet/dynamic/presentation/net_23/images/loading.gif",                Node: $(this).find("img"),                timeout: 1000            };            var options = $.extend(defaults, options);            var Browser = new Object();            var plus = {                BrowserVerify:function(){                    Browser.userAgent = window.navigator.userAgent.toLowerCase();                    Browser.ie = /msie/.test(Browser.userAgent);                    Browser.Moz = /gecko/.test(Browser.userAgent);                },                EachImg: function () {                    defaults.Node.each(function (i) {                        var img = defaults.Node.eq(i);                        plus.LoadEnd(Browser, img.attr("imgurl"), i, plus.LoadImg);                    })                },                LoadState:function(){                    defaults.Node.each(function (i) {                        var img = defaults.Node.eq(i);                        var url = img.attr("src");                        img.attr("imgurl", url);                        img.attr("src",defaults.loadimg);                    })                },                LoadEnd: function (Browser, url, imgindex, callback) {                    var val = url;                    var img = new Image();                    if (Browser.ie) {                        img.onreadystatechange = function () {                            if (img.readyState == "complete" || img.readyState == "loaded") {                                callback(img, imgindex);                            }                        }                    } else if (Browser.Moz) {                        img.onload = function () {                            if (img.complete == true) {                                callback(img, imgindex);                            }                        }                    }                    img.onerror = function () { img.src = defaults.errorimg }                    img.src = val;                },                LoadImg: function (obj, imgindex) {                    setTimeout(function () {                        defaults.Node.eq(imgindex).attr("src", obj.src);                    }, defaults.timeout);                }            }            plus.LoadState();            plus.BrowserVerify();            plus.EachImg();        }    });      })(jQuery);

 

指令碼是從網上搜尋代碼之後整理的，也是第一次寫外掛程式，如果有啥寫的不對的，還請多多指教!

JQuery圖片載入顯示loading和載入失敗預設圖片