FadeIn изображение после загрузки - PullRequest
Новая
       16

FadeIn изображение после загрузки

2 голосов
/ 23 января 2010

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

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

Это большие пальцы изображения: 

<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>

Это контейнер, в который должно быть загружено изображение: 

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

и это файл jquery: 

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

    });

});

Я пытался использовать complete ниже success, но результат все тот же. Любой совет?

Ответы [ 5 ]

5 голосов
/ 24 января 2010

Может быть попытаться привязать обработчик загрузки к любым изображениям внутри данных, которые загружаются через 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();  
          });
        }
      });    

  });

});
1 голос
/ 24 января 2010

У вас есть изображение, скрытое для начала, как и должно быть. Я бы добавил обработчик события загрузки к изображению, а затем запустил ваш AJAX, чтобы установить HTML. В вашем обработчике событий загрузки добавьте изображение. Будет проще, если вы просто замените источник существующего изображения, с тех пор вы можете добавить к нему обработчик загрузки - он не будет работать в 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);
          }
        });    

    });

});
0 голосов
/ 24 января 2010

Вы должны выполнить запрос AJAX для этого изображения, дождаться полной загрузки его, прослушивая событие успеха. Это поможет вам получить изображение в кеш браузера. Тогда вы можете сделать это по-своему. Изображение будет загружено сразу после этого.

0 голосов
/ 24 января 2010

Вам необходимо использовать функцию обратного вызова для события .html. 

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

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

edit: на самом деле это может не работать из-за того, что .html является синхронной операцией. Вы имели в виду load () вместо этого?

0 голосов
/ 24 января 2010

Загрузка изображений с использованием Объект изображения . Вызывает событие load при загрузке изображения. Таким образом, вы помещаете изображение в #slika, когда оно загружено на 100%, и используете jQuery.fadeIn().

...