如何确保在JQuery插件中加载图像？

在创建需要图像尺寸的JQuery插件时，我发现像Chrome这样的webkit浏览器通常会为图像返回0尺寸，因为它们是并行加载的。

我的快速而肮脏的解决方案是在$(window).load()事件中包装调用我的插件的代码：

 $(document).ready(function() { $(window).load(function() { $('.magnifier').magnifier(); }); }); 

我将如何在插件内部实现此function？ 什么是检测图像已加载的最干净的方法，以便我可以测量它们的尺寸？

Answer 1

图像有一个load（）事件，所以你可以这样做：

 $(document).ready(function() { $('.magnifier').magnifier(); }); $.fn.magnifier = function() { return this.each(function() { $(this).find('img').load(function() { // do something to image when it is loaded }); }); } 

你也可以简单地将window.load中的代码包装在插件本身内：

 $.fn.magnifier = function() { var that = this; $(window).load(function() { that.each(function() { $(this).find('img').each(function() { // image would be loaded at this point }); }); }); return this; } 

Answer 2

我不确定我是否完全理解但是在加载所有图像后它会激活。

 $("img").load(function() { });