Изображение исчезает после его загрузки

Question

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

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 но результат все тот же.Есть какой-нибудь совет?

Answer 1

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

  });

});

Answer 2

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

    });

});

Answer 3

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

Answer 4

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

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

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

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

Answer 5

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