Обнаруживать нагрузку на изображение

Ответ 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();
});

Ответ 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 been loaded.
};

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

Ответ 3

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

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

Ответ 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
     });
}

Ответ 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...
   });
}) ;

Ответ 6

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

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

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