图像上传静态图像 [英] Image onload for static images

问题描述

我知道，对于图像onload工作，您必须在附加onload处理程序后设置src。但是，我想将onload处理程序附加到我的HTML中是静态的图像。现在我用下面的方法（使用jQueryquery）：

 < img id ='img1'src ='picture .JPG'> 
  

  alert（'foo'）; 
}）
 .attr（'src'，$（'img1' ）.attr（ 'SRC'））; 
  

但这很丑，有明显的流程，只能对匹配的选择器一个图像。还有其他更好的方法吗？

编辑

我的意思是它只能是对于只匹配一个图像的选择器，完成这样做：

 < img class ='img1'src ='picture .JPG'> 
< img class ='img1'src ='picture2.jpg'> 
  

  $（'。img1'）。load（function（）{
 alert（'foo'）; 
}）
 .attr（'src'，$（'。img1 '）.attr（' SRC'））; 
  

这两个图像都将有src ='picture.jpg'

解决方案

可以通过调用 .trigger（）或<$ c来直接触发事件（或处理程序） $ c> .load（）。

如果你知道你想要事件，因为你知道图像已经加载，你可以这样做：

  $（'＃img1'）load（function（）{
 alert （'foo'）; 
}）
 .trigger（'load'）; //触发图像上的加载事件
  

如果您在文档准备或某时刻运行脚本哪里还不清楚图像是否存在，那么我会使用这样的东西：

  $（' img.static'）
 .load（function（）{
 alert（'foo'）; 
 return false; //取消事件气泡
}）
。每个（function（）{
 //触发已加载图像的事件，
 //其他图像将在它们加载
之后触发事件if（this.complete&&& naturalWidth！== 0）{
 $（this）.trigger（'load'）; 
} 
}）;请注意，加载事件bubble（jQuery 1.3），您可能会触发一个加载处理程序该文档过早地，如果你不取消在img处理程序中的气泡。
 
 
 
对于记录： img.src = img.src 触发解决方案不幸在Safari上无法正常工作。您将需要将 src 设置为其他内容（如＃或关于：空白），然后返回以重新加载。
 
I know that for the image onload to work you have to set the src after the onload handler was attached. However I want to attach onload handlers to images that are static in my HTML. Right now I do that in the following way (using jQquery):
<img id='img1' src='picture.jpg'>
$('#img1').load( function() {
 alert('foo');
})
.attr('src', $('img1').attr('src'));
But this is rather ugly and has the obvious flow that it can only be done for selectors that match only one image. Is there any other, nicer way to do this?

edit

What I meant by that it can only be done for selector that match only one image is that when doing this:
<img class='img1' src='picture.jpg'>
<img class='img1' src='picture2.jpg'>
$('.img1').load( function() {
 alert('foo');
})
.attr('src', $('.img1').attr('src'));
That both images will have src='picture.jpg'
解决方案
You can trigger the event (or it's handler) directly by calling .trigger() or .load().

If you know that you want the event, because you know that the images are already loaded, then you can do it like this:
$('#img1').load(function() {
    alert('foo');
  })
  .trigger('load');  // fires the load event on the image
If you are running your script on document ready or some moment where it isn't yet clear if the images are there or not, then I would use something like this:
$('img.static')
  .load(function(){
    alert('foo');
    return false; // cancel event bubble
  })
  .each(function(){
    // trigger events for images that have loaded,
    // other images will trigger the event once they load
    if ( this.complete && this.naturalWidth !== 0 ) {
      $( this ).trigger('load');
    }
  });
Be warned that the load event bubbles (jQuery 1.3) and you might possibly be triggering a load handler on the document prematurely if you don't cancel the bubble in the img handler.

For the record: The img.src=img.src triggering solution will unfortunately not work correctly on Safari. You will need to set the src to something else (like # or about:blank) and then back for reload to happen.

                        
这篇关于图像上传静态图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！