FadeIn image after it is loaded

问题

I'm trying to make image being loaded into div with fadeIn effect. Problem is that I don't know how to avoid loading and fading at the same time. I want image to be loaded and after it is completely loaded it should be faded in.

http://www.izrada-weba.com/vedranmarketic

These are image thumbs:

<div id="thumbs">
                <a href="#" class="slika_thumb" id="1"><img src="slike/th.jpg" border="0"/></a><a href="#" class="slika_thumb" id="2"><img src="slike/th.jpg" border="0"/></a><a href="#" class="slika_thumb" id="3"><img src="slike/th.jpg" border="0"/></a><a href="#"><img src="slike/th.jpg" border="0"/></a><a href="#"><img src="slike/th.jpg" border="0"/></a><a href="#"><img src="slike/th.jpg" border="0"/></a> </div>
        </div>

This is container where image should be loaded:

<div id="desna_kolona">
            <div id="slika"><img src="slike/c6.jpg" /></div>
        </div>

and this is jquery file:

$(document).ready(function(){

    $('.slika_thumb').click(function() {
        var id = $(this).attr("id");
        $('#slika').hide();

        $.ajax({
          url: 'slike/slika.php?id=' + id,
          success: function(data) {

            $('#slika').html(data);
            $('#slika').fadeIn();
          }
        });    

    });

});

I tried to use complete below success but still the same result. Any advice?

回答1:

Maybe try to bind an onload handler to any images inside the data which gets loaded via ajax.

$(document).ready(function(){

  $('.slika_thumb').click(function() {
      var id = $(this).attr("id");
      $('#slika').hide();

      $.ajax({
        url: 'slike/slika.php?id=' + id,
        success: function(data) {

          $('#slika').html(data);
          $('#slika img').bind("load", function() {
            $('#slika').fadeIn();  
          });
        }
      });    

  });

});

回答2:

You have the image hidden to start with, as you should. What I would do is add a load event handler to the image, then run your AJAX to set the HTML. In your load event handler, fade the image in. It will be easier if you just replace the source of the existing image since then you can add the load handler to it -- it won't work on the div.

$(document).ready(function(){

    $('#slika').find('img').load( function() {
         $(this).fadeIn();
    });

    $('.slika_thumb').click(function() {
        var id = $(this).attr("id");
        $('#slika').hide().find('img').hide();

        $.ajax({
          url: 'slike/slika.php?id=' + id,
          success: function(data) {
            var src = $(data).find('img').attr('src');       
            $('#slika').show().find('img').attr('src',src);
          }
        });    

    });

});

回答3:

Load images using Image Object. It fires load event when image is downloaded. So you put image into #slika when it's 100% downloaded and use jQuery.fadeIn().

回答4:

You need to use a callback function on the .html event.

    $.ajax({
      url: 'slike/slika.php?id=' + id,
      success: function(data) {

        $('#slika').html(data, function() {
           $('#slika').fadeIn();
        });
      });
    });

edit: this actually may not work due to .html being a synchronous operation. Did you mean load() instead?

回答5:

You must issue AJAX request for that image, wait for it to be loaded completely by listening on success event. This will help you to get the image into the browser cache. Then you can do it your way. The image will be loaded instantly after this.

来源：https://stackoverflow.com/questions/2124706/fadein-image-after-it-is-loaded

标签

jquery

image

load

fadein