Определить загрузку изображения - PullRequest
Новая
       17

Определить загрузку изображения

55 голосов
/ 21 августа 2010

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

Ответы [ 6 ]

107 голосов
/ 21 августа 2010

Вы можете использовать обработчик событий .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();
});
18 голосов
/ 21 августа 2010

Так же просто использовать простой 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;
4 голосов
/ 11 февраля 2015

Использование функции 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 голосов
/ 07 апреля 2014

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

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

1 голос
/ 15 декабря 2015

Это просто с 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...
   });
}) ;
0 голосов
/ 26 марта 2015

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

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

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

...