Jquery: исчезают изображения после загрузки DOM.Работает иногда ..?

Question

 //fade in images after the image has loaded..

$(document).ready(function(){
  $(".image_ad").hide().bind("load", function () { $(this).fadeIn(400); });
 });

Если у кого-то есть вход, это было бы здорово.

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

Проблема в том, что иногда параизображения никогда не будут загружаться, нажатие кнопки «Обновить» исправит это, но я бы предпочел сделать это идеально и спросить, есть ли у кого-нибудь представление о том, почему.уже запущен, я знаю, что это в документе. Уже возможно, но это возможно ..

еще раз спасибо.

---

Спасибо за все ответы!Я поиграю с фрагментами сегодня вечером и отправлю ответ, который я нашел полезным.Снова ваши ответы очень ценятся.

---

Как видно ниже, это, кажется, работает очень хорошо для моих нужд.Спасибо всем.

$(document).ready(function(){
   $(".gallery_image").hide().not(function() {
       return this.complete && $(this).fadeIn(100);
   }).bind("load", function () { $(this).fadeIn(100); });
});

---

Еще одна вещь, мне не нравятся незавершенные сообщения, так что ...

Я обнаружил, что это не работает в Firefox 3.6.12 .

Я посмотрю на это.

Answer 1

Я предполагаю, что это потому, что изображения кэшируются, поэтому load никогда не срабатывает.

Попробуйте исключить скрытые кэшированные изображения:

$(document).ready(function(){
   $(".image_ad").not(function() {
       return this.complete;
   }).hide().bind("load", function () { $(this).fadeIn(400); });
});

или скрыть ихно немедленно сделайте fadeIn на полных.

$(document).ready(function(){
   $(".image_ad").hide().not(function() {
       return this.complete && $(this).fadeIn(400);
   }).bind("load", function () { $(this).fadeIn(400); });
});

Answer 2

У меня такое ощущение, что иногда к моменту запуска скрипта dom загружается не полностью, я знаю, что это в документе. Уже, но это возможно ...

Я думаю, что проблема скорее в другом: возможно, dom полностью загрузился после того, как изображения появились.Поэтому, когда ваш обработчик загрузки будет присоединен, изображения уже будут загружены, и обработчик никогда не будет запущен.

Вы можете обойти это, либо проверив image.complete, либо вставив изображения через js и прикрепив загрузкуобработчик сразу.

Попробуйте:

$(document).ready(function(){
    $(".image_ad").hide().bind("load", function () { $(this).fadeIn(400); }).each(function() {
        if(this.complete && jQuery(this).is(":hidden")) {
            jQuery(this).fadeIn(400);
        }
    });
});

(или что-то в этом роде).

Answer 3

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

function imgsLoaded(el,f){
  var imgs = el.find('img');
  var num_imgs = imgs.length;

  if(num_imgs > 0){
    imgs.load(function(){
      num_imgs--;
      if(num_imgs == 0) {
        if(typeof f == "function")f();//custom callback
      }
    });
  }else{
    if(typeof f == "function")f();//custom callback
  }
}

ИСПОЛЬЗОВАНИЕ:

imgsLoaded($('#container'),function(){

$('.image_ad').fadeIn(400);

});

Надеюсь, это поможет!

W.

Answer 4

Вам лучше скрыть изображения с помощью класса CSS

.image_ad { display:none; }

А затем установите:

$(document).ready(function(){
    $('.image_ad').fadeIn(400);
});

Что нужно сделать, так это убедиться, что изображения сначала скрыты, а затем, когда все получено и загружено, исчезают изображения.

Answer 5

Не уверен, поможет ли это или нет, но вы можете избавиться от вызова hide(), просто добавив его в свой css:

img.image_ad{
  display: none;
}