Обнаружение загрузки изображения

можно ли обнаружить, как только изображение было загружено с помощью jQuery?

6 54
jquery image-load

6 ответов:

можно использовать .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();
});
107

это так же просто использовать простой 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;
18

Я также исследовал это в течение длительного времени, и нашли этот плагин чудесно помочь с этим: https://github.com/desandro/imagesloaded

кажется, что aweful много кода, но...Я не нашел другого способа проверить, когда изображение было загружено.

4

использование функции jQuery on('load') - это правильный способ проверить, загружено ли изображение. Но имейте в виду, что функция 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
     });
}
4

это легко с 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...
   });
}) ;
1

Я думаю, это может помочь вам немного:

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

Итак, если он загружен - будет показано исходное изображение. В другом - будет показано изображение, которое содержит факт с разбитым изображением или 404 HTTP заголовком.

0