jQuery 이미지 로딩이 로딩 효과를 보여줍니다.

이미지 로딩 기능을 여러번 사용해야 하는데, 나중에 사용할 수 있도록 다시 정리하고 싶습니다.

페이지 인용

<p class="container">
 <p class="row block" id="img-list">
 <p class="col-md-3">
  <img  class="img-thumbnail lazy"  src="/static/imghwm/default1.png"  data-src="/Assets/OnePiece/1.jpg"    alt="jQuery 이미지 로딩이 로딩 효과를 보여줍니다." >
 </p>
 <p class="col-md-3">
  <img  class="img-thumbnail lazy"  src="/static/imghwm/default1.png"  data-src="/Assets/OnePiece/2.jpg"    alt="jQuery 이미지 로딩이 로딩 효과를 보여줍니다." >
 </p>
 <p class="col-md-3">
  <img  class="img-thumbnail lazy"  src="/static/imghwm/default1.png"  data-src="/Assets/OnePiece/3.jpg"    alt="jQuery 이미지 로딩이 로딩 효과를 보여줍니다." >
 </p>
 <p class="col-md-3">
  <img  class="img-thumbnail lazy"  src="/static/imghwm/default1.png"  data-src="/Assets/OnePiece/4.jpg"    alt="jQuery 이미지 로딩이 로딩 효과를 보여줍니다." >
 </p>
 <p class="col-md-3">
  <img  class="img-thumbnail lazy"  src="/static/imghwm/default1.png"  data-src="/Assets/OnePiece/5.jpg"    alt="jQuery 이미지 로딩이 로딩 효과를 보여줍니다." >
 </p>
 <p class="col-md-3">
  <img  class="img-thumbnail lazy"  src="/static/imghwm/default1.png"  data-src="/Assets/OnePiece/6.jpeg"    alt="jQuery 이미지 로딩이 로딩 효과를 보여줍니다." >
 </p>
 <p class="col-md-3">
  <img  class="img-thumbnail lazy"  src="/static/imghwm/default1.png"  data-src="/Assets/OnePiece/7.jpg"    alt="jQuery 이미지 로딩이 로딩 효과를 보여줍니다." >
 </p>
 <p class="col-md-3">
  <img  class="img-thumbnail lazy"  src="/static/imghwm/default1.png"  data-src="/Assets/OnePiece/8.jpg"    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)를 참고해주세요!