JQuery图片加载显示loading和加载失败默认图片

Posted 2020-08-17 See You Tomorrows

 在很多时候我们需要用到图片加载功能，在网上搜资料后就想为了以后使用方便重新整理了下，结果如图：

   最后一张是加载失败显示的图片，没找到合适的图片，先用他顶替。

页面引用

<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);

 

脚本是从网上搜索代码之后整理的，也是第一次写插件，如果有啥写的不对的，还请多多指教!