Проверьте изображение загружается, когда источник установлен js?

Question

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

Вот мой фрагмент кода:

timer = setInterval(function() {
selector.attr('src',  'localhost/product/image1.jpg');

image1 - 436x436 и его загрузка занимает много времени. Я хочу показать загрузку изображения перед загрузкой этого изображения.

Пожалуйста, помогите мне...

Answer 1

Используйте код ниже

 selector.attr('src',  'localhost/product/image1.jpg');
 //show loader code here 
 var loadImage = new Image();
 loadImage.src = selector.attr('src');
  loadImage.onload = function(){
    // hide loader code here
 }

Answer 2

Вы можете использовать функцию ниже, чтобы получить обратный вызов загрузки для изображения:

$("#idOfImage").load(function() { /* image loaded */})
               .error(function() { /* error in loading */ });

Answer 3

//show image on mouseenter event
img.addEventListener('mouseenter',function(){
    this.setAttribute('src',  'localhost/product/image1.jpg');
    //show loading image here
});
img.addEventListener('load',function(){
    //Image loaded. So remove loading image here.
});

Answer 4

Вот что я сделал на своем сайте, брат, и он отлично загружается.

HTML

<a href="#" full="http://www.sample.com/wp-content/uploads/2015/01/plot3picture.jpg">
    <img src="http://www.sample.com/wp-content/uploads/2015/01/plot3picture-150x150.jpg" alt="" />                
</a>

JS

$( window ).bind( 'load', function(){
    setTimeout( function(){ 
        $( 'body a' ).each( function(){
            $( this ).find( 'img' ).attr( 'src', $( this ).attr( 'full' ) ); 
        }); 
    }, 300 );
});

Answer 5

Загрузите два изображения на страницу load.place в заголовке

Попробуй это:

if (document.images) {
    img1 = new Image();
    img1.src = "imgpath/image1.png";
    img2 = new Image();
    img2.src = "imgpath/image2.png"";
}