Дождитесь загрузки изображений, добавленных с помощью ajax

$.post("service.php", { GetStartpageImages : true },function(data) { 

    $.each(data,function(i, value){ 

     var path = "uploads/thumb_" + value.Filename; 

     $('.startpage-images').append(
     '<div class="imagewrapper clearfix">' + 
      '<a class="imagelink" href="?p=photo&id=' + value.ID + '">' + 
       '<img src="'+ path +'"/></a>' + 
       '<div class="imageinfo alpha70">'+ value.UploadTimestamp +'</div>' + 
      '</a>' + 
     '</div>'); 

    }); 
});

Как я могу показать их после их загрузки? $(window).load.. не работал для меня. БлагодаряДождитесь загрузки изображений, добавленных с помощью ajax

источник

2011-12-15 Johan

Это следует сделать это:

$.post("service.php", { GetStartpageImages : true },function(data) { 

    $.each(data,function(i, value){ 

     var path = "uploads/thumb_" + value.Filename; 

     $('.startpage-images').append('<div class="imagewrapper clearfix">' + 
     '<a class="imagelink" href="?p=photo&id=' + value.ID + '">' + 
      '<img src="'+ path +'"/></a>' + 
      '<div class="imageinfo alpha70">'+ value.UploadTimestamp +'</div>' + 
     '</a>' + 
     '</div>'); 


     function imgLoadCallback(){ 
      $('.imagewrapper').show(); 
     } 

     var img = new Image(); 
     img.addEventListener('load', imgLoadCallback, false); 
     img.src = path; 


    }); 
});

В приведенном выше коде предполагается, что в вашем css у вас есть .imagewrapper {display:none}. Как только изображение будет полностью загружено, вызывается imgLoadCallback(). Даже если у пользователя есть изображение в кеше, оно все равно будет вызываться (сразу же, в этом случае).

источник

2011-12-15 23:04:32 maxedison

Спасибо, но я не могу заметить разницу:/http://83.254.112.18/fotosida/ – Johan

Все, что я могу сказать, это то, что мой код работает. Я использовал такие вещи совсем недавно, как сегодня утром. Похоже, вы загружаете несколько изображений, а не только один. Я позабочусь о том, чтобы опубликовать больше кода, чтобы помочь вам. – maxedison

Да, все согласны с этим, так как проблема не в вашем коде - это был html, опубликованный выше, который был событием загрузки, чтобы потерпеть неудачу. Это может быть полезно для кого-то другого :) Thnaks за помощь! – Johan

Я хотел бы сделать что-то вроде этого

$.each(data,function(i, value){ 
    var path = "uploads/thumb_" + value.Filename; 
    $('.startpage-images').append(
    '<div class="imagewrapper clearfix">' + 
     '<a class="imagelink" href="?p=photo&id=' + value.ID + '">' + 
     '<img data-src="'+ path +'"/></a>' + 
      '<div class="imageinfo alpha70">'+ value.UploadTimestamp +'</div>' + 
      '</a>' + 
     '</div>'); 
}); 

$('.startpage-images img').each(function() { 
    $(this).attr("src", $(this).attr("data-src")); 
});

, так что я бы установить Attr data-src и в конце установите его на src

источник

2011-12-15 22:43:09

Спасибо, но я испугался, что результат останется тем же. Ссылка: http://83.254.112.18/fotosida/. Очистите кеш и убедитесь сами. – Johan

'<div class="imageinfo alpha70">'+ value.UploadTimestamp +'</div>'

Без этого метод .load работал. Не знаю, почему, может быть, некоторая ошибка jquery.

источник

2011-12-15 23:29:23 Johan

Дождитесь загрузки изображений, добавленных с помощью ajax

ответ

Смежные вопросы