检测图像加载

是否有可能检测一次图像已经加载jQuery？

Answer 1

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

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

请确保在设置源代码之前将其附加，或者在附加处理程序以侦听它（例如，从caching加载）之前可能已经触发事件。

如果这是不可行的（绑定后设置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

在（'load'）函数上使用jQuery是检查图像是否被加载的正确方法。 但请注意，如果图像已经在caching中，则on（'load'）函数将不起作用。

 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加载函数，并检查图片是否真的加载。 所以我们做了两者的结合：

 $('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头。