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

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 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 
    }); 
} 

Answer 5

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

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

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

Answer 6

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