Question

一旦用jQuery加载图像，是否可以检测到？

Answer 1

您可以使用.load()事件处理程序，如下所示：

$("#myImg").load(function() {
  alert('I loaded!');
}).attr('src', 'myImage.jpg');

确保在设置源之前附加，或者在附加处理程序以侦听它之前事件可能已被触发（例如从缓存加载）。

如果那个不可行（在绑定后设置src），请务必检查它是否已加载并自行启动，如下所示：

$("#myImg").load(function() { alert('I loaded!'); }).each(function() { if(this.complete) $(this).load(); });

Answer 2

使用普通Javascript也很简单：

  // Create new image
var img = new Image();

  // Create var for image source
var imageSrc = "http://example.com/blah.jpg";

  // define what happens once the image is loaded.
img.onload = function() {
    // Stuff to do after image load ( jQuery and all that )
    // Within here you can make use of src=imageSrc, 
    // knowing that it's been loaded.
};

  // Attach the source last. 
  // The onload function will now trigger once it's loaded.
img.src = imageSrc;

Answer 3

我也一直在研究这个问题，并且发现这个插件很精彩帮助：https://github.com/desandro/imagesloaded

这看起来像是一大堆代码，但是......我找不到其他方法来检查图像何时被加载。

Answer 4

使用jQuery（＆＃39; load＆＃39;）函数是检查图像是否已加载的正确方法。但请注意，如果图像已在缓存中，则on（＆＃39; load＆＃39;）功能将无效。

var myImage = $('#image_id');
//check if the image is already on cache
if(myImage.prop('complete')){ 
     //codes here
}else{
     /* Call the codes/function after the image is loaded */
     myImage.on('load',function(){
          //codes here
     });
}

Answer 5

使用jquery很容易：

$('img').load(function(){
   //do something
});

如果尝试使用：

$('tag')html().promise().done(function(){ 
   //do something
}) ;

但不会检查图片是否加载。如果代码加载，那就完成了。否则，您可以检查代码是否已完成，然后触发img load函数并检查图片是否真的已加载。所以我们将两者结合起来：

$('tag')html('<img src="'+pic+'" />').promise().done(function(){ 
   $('img').load(function(){
     //do something like show fadein etc...
   });
}) ;

Answer 6

我认为这可以帮到你一点：

    $('img').error(function(){
        $(this).attr( src : 'no_img.png');
 })

所以，如果加载 - 将显示原始图像。在其他情况下 - 将显示图像，其中包含崩溃图像或404 HTTP标头的事实。

检测图像负载

6 个答案: