이미지 로딩 기능을 여러번 사용해야 하는데, 나중에 사용할 수 있도록 다시 정리하고 싶습니다.
페이지 인용
<p class="container"> <p class="row block" id="img-list"> <p class="col-md-3"> <img src="/Assets/OnePiece/1.jpg" class="img-thumbnail" alt="jQuery 이미지 로딩이 로딩 효과를 보여줍니다." > </p> <p class="col-md-3"> <img src="/Assets/OnePiece/2.jpg" class="img-thumbnail" alt="jQuery 이미지 로딩이 로딩 효과를 보여줍니다." > </p> <p class="col-md-3"> <img src="/Assets/OnePiece/3.jpg" class="img-thumbnail" alt="jQuery 이미지 로딩이 로딩 효과를 보여줍니다." > </p> <p class="col-md-3"> <img src="/Assets/OnePiece/4.jpg" class="img-thumbnail" alt="jQuery 이미지 로딩이 로딩 효과를 보여줍니다." > </p> <p class="col-md-3"> <img src="/Assets/OnePiece/5.jpg" class="img-thumbnail" alt="jQuery 이미지 로딩이 로딩 효과를 보여줍니다." > </p> <p class="col-md-3"> <img src="/Assets/OnePiece/6.jpeg" class="img-thumbnail" alt="jQuery 이미지 로딩이 로딩 효과를 보여줍니다." > </p> <p class="col-md-3"> <img src="/Assets/OnePiece/7.jpg" class="img-thumbnail" alt="jQuery 이미지 로딩이 로딩 효과를 보여줍니다." > </p> <p class="col-md-3"> <img src="/Assets/OnePiece/8.jpg" class="img-thumbnail" alt="jQuery 이미지 로딩이 로딩 효과를 보여줍니다." > </p> </p> </p> <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 이미지 로딩 표시 로딩 효과입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!