Загрузить изображение с помощью jQuery fadeIn после завершения загрузки

Question

Интересно, есть ли способ сделать это, потому что когда я запускаю тест, fadeIn не работает. Похоже, что он активируется сразу же, когда изображение тега находится в документе, но только когда это изображение будет загружено полностью!

$(document).ready(function(){ 
 
    $('a[name=view]').click(function(e){ 
 
     e.preventDefault(); 
 
     $('#load').show(); 
 
     $('#img').append('<img src="media/1.jpg" id="loaded" width="600"/>'); 
 
     $('#loaded').load(function(){ 
 
      $('#load').delay(1000).fadeOut(); 
 
      $('#img').delay(1000).fadeIn(); 
 
     }); 
 
    }); 
 
});

В этом случае FadeIn работает только тогда, когда изображение загружается менее чем за 1 сек. Я хочу, чтобы этот эффект работал на изображении 4 мб, например, так, без задержки, но еще один вариант.

Thank u all !! К сожалению мой английский: 3

Answer 1

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

$('a[name=view]').on('click', function(e){ 
    e.preventDefault(); 
    $('#load').show(); //some ajax spinner or "loading" text 
    $('#img').append('<img src="media/1.jpg" id="loaded-img" width="600" style="display:none;"/>'); //append your image to #img element (div or something) 
    $("#loaded-img").one("load", function() { 
     $('#load').fadeOut(300); //remove ajax spinner or "loading" text 
     $(this).fadeIn(300); //show image 
    }).each(function() { 
     if(this.complete) $(this).load(); 
    }); 
});