Блог

У меня есть веб-сайт, на котором отображается много картинок. Вместо того, чтобы показывать их и наблюдать за их загрузкой, есть ли способ скрыть их после завершения загрузки? Своего рода новичок в удивительном мире jQuery и javascript.

Прямо сейчас я получаю данные из PHP-файла, который вызывает сервер MySQL и получает последние изображения. Он просто возвращает большой блок HTML для отображения:

 // If the user clicks the logo
$("#logo").click(function() {
$("#right_bar_wrapper").animate({ height: 'toggle', opacity: 'toggle' }, '200');
var thePostData = "username=c";
$.ajax({
  type: "POST",
  url: "http://myflashpics.com/v2/process_newsfeed.php",
  data: thePostData,
  success: function(theRetrievedData) {
    document.getElementById('right_bar_wrapper').innerHTML = theRetrievedData;
    $("#right_bar_wrapper").fadeIn("200");

  }
});
});
  

Вот как выглядит ОДИН div, содержащий каждое изображение:

 <div class='sidebar_image_box_newsfeed'> 
<div class='sidebar_image_box_newsfeed_user_info makeProfileAppear' id='user_coultonvento'><img src='http://myflashpics.com/get_image.php?short_string=kmdpamp;size=thumbnail' />TheAmazingCoultoniusTheFourneeth...</div> 
<img src='http://myflashpics.com/get_image.php?short_string=6v9oamp;size=big' id='image_6v9o' class='makePictureBig' style='width: 180px;' /> 
<div class='sidebar_image_box_newsfeed_user_info_comments' style='float: right; margin-top: -1px; margin-left: 20px; display: none;' id='bigpicture_comment_6v9o'>9</div> 
<div class='sidebar_image_box_newsfeed_caption'>Usama bin laden? I believe that's a typo, Fox. </div> 
<div class='sidebar_image_box_newsfeed_user_info_comments' id='littlepicture_comment_6v9o'>9</div> 
<div style='clear: both;'></div> 
</div><div class='sidebar_image_box_newsfeed'> 
<div class='sidebar_image_box_newsfeed_user_info makeProfileAppear' id='user_BrandonVento'><img src='http://myflashpics.com/get_image.php?short_string=e4r7amp;size=thumbnail' />Brandon Vento</div> 
<img src='http://myflashpics.com/get_image.php?short_string=o1skamp;size=big' id='image_o1sk' class='makePictureBig' style='width: 180px;' /> 
<div class='sidebar_image_box_newsfeed_user_info_comments' style='float: right; margin-top: -1px; margin-left: 20px; display: none;' id='bigpicture_comment_o1sk'>9</div> 
<div class='sidebar_image_box_newsfeed_caption'></div> 
<div class='sidebar_image_box_newsfeed_user_info_comments' id='littlepicture_comment_o1sk'>9</div> 
<div style='clear: both;'></div> 
</div>
  

Конечно, он исчезает, но пользователь видит, как он загружается.

Каким был бы наилучший способ сделать это?

Спасибо,
Коултон

для этого вы можете использовать функцию jquery image .load() image .load()

 $.ajax({
  type: "POST",
  url: "http://myflashpics.com/v2/process_newsfeed.php",
  data: thePostData,
  success: function(theRetrievedData) {
    document.getElementById('right_bar_wrapper').innerHTML = theRetrievedData;
    $("#right_bar_wrapper").fadeIn("200");
    //here do some trick
    $("#right_bar_wrapper img").load(function(){ 
        $(this).fadeIn();
    });
  }
});
  

или вы можете использовать live () для привязки динамических элементов img

Загрузите теги img с помощью style=’display: none’ и привяжите событие load () для изображения, чтобы оно исчезло. Документация: http://api.jquery.com/load-event /

Пример:

 $(".makePictureBig").live('load', function(){ 
    $(this).fadeIn();
});
  

О .. используйте load()

Вы можете выполнить функцию, когда загрузка изображения завершится (отобразить содержащий div).

Взгляните на этот пример http://www.stoimen.com/blog/2009/08/05/jquery-check-whether-image-is-loaded /

Во-первых, используйте .load() вместо ajax, так как это проще в использовании

Затем, в качестве обратного вызова функции load(), привяжите fadeIn() к событию загрузки

 $("#logo").click(function() {
  $("#right_bar_wrapper")
    .animate({ height: 'toggle', opacity: 'toggle' }, '200')
    .load( "http://myflashpics.com/v2/process_newsfeed.php",
           {"username" : "c"},
           function() {
               $(this).bind('load',function(){
                  $(this).fadeIn("200");
               });
           }
  );
});