0

I wonder if there is a way to do this, because when I run the test, the fadeIn doesn't work. It appears that it is activated immediately when the tag image is in the document, but only when that image is completly downloaded it appears!

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

In this case the fadeIn works only if the image is loaded in less than 1 sec. I want that effect works in a image of 4 mb, for exemple, so, without delay, but another option.

Thank u all!! Sorry my english :3

Klethonio
  • 41
  • 4
  • Does this help?: [jQuery callback on image](http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached) – Yass Jan 08 '16 at 19:34

1 Answers1

0

Try this:

$('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();
    });
});
mleko64
  • 1
  • Please add explanation to your answer. – Michał Perłakowski Jan 08 '16 at 21:23
  • Thank u for aswering.. The same problem it is. I am runing with 6 mb image for the tests. I know it is perfection away out of line, but it came into my head and even worse, looks like something very easy or silly, you know! – Klethonio Jan 08 '16 at 22:03