在函数中插入代码

Insert code in a function

本文关键字：代码 插入 函数      更新时间：2023-09-26

在加载图像时，我使用此代码来显示加载器效果：

$(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

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

如果你想在其他地方叫它，你可以简单地给它起一个像这样的名字

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)一样将其绑定到ready，并像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树
  • 对于已经存在于浏览器缓存中的图像，可以停止激发

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

相关文章：