Question

我正在使用此代码在图片加载时显示加载器效果：

$(function(){
   jQuery('figure').append('<div class="loader"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>');
   jQuery('.img').load(function(){
      jQuery('.loader').remove();
   });
});

但是我希望这个代码在一个函数中，以便我可以在任何图像上调用它。 JSFIDDLE

Answer 1

您传递给$()的内容已经是一个匿名函数。

如果你想在其他地方打电话，你可以简单地给它命名，如

function showSoader(){
  jQuery('figure').append('<div class="loader"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>');
  jQuery('.img').load(function(){
     jQuery('.loader').remove();
  });
}

您可以将其绑定到就绪状态$(showSoader)，然后在showSoader()之类的其他地方调用它。

如果要概括它以使用多个元素，只需指定一个参数来访问该元素：

function showSoader(selector){
  var $elm = $(selector);
  $elm.append('<div class="loader"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>');
  $elm.find('.img').load(function(){
     $elm.find('.loader').remove();
  });
}

你打电话给showSoader("#myImgContainer")

值得注意的是：

与图像一起使用时加载事件的注意事项

开发人员尝试使用.load（）解决的常见问题   快捷方式是在图像（或集合）时执行函数   图像）已完全加载。有几个已知的警告   这应该注意。这些是：


它不能始终如一地工作，也不能可靠地跨浏览器

如果图像src设置为与之前相同的src，则无法在WebKit中正确触发

它没有正确地冒泡DOM树

可以停止触发已存在于浏览器缓存中的图像

Answer 2

<强> JQuery的

jQuery.fn.extend({
   loadImage: function() {       
      return this.each(function() {
         var loading= jQuery('<div class="loader"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>').insertBefore(jQuery(this));
         jQuery(this).load(function(){   
            loading.remove();
         }).error(function() {
            loading.remove();
         });
      });
   }
});
$(".img").loadImage();

DEMO

在函数中插入代码

2 个答案:

与图像一起使用时加载事件的注意事项