Выцветание изображений одно за другим ПОСЛЕ загрузки страницы

Question

Хорошо, вот мой рабочий код в настоящее время ...

$(window).load(function() {
     $("#scroller li").each(function(i) {
          $(this).delay(400*i).fadeIn();
     });
});

После того, как окно загружено, оно постепенно исчезает в одном изображении за другим, отлично.Но на моей странице есть ссылки, которые вызывают в HTML-файл, который содержит больше изображений в div.Этот сценарий просто добавляет изображения один за другим, пока они загружаются, в результате чего половина обрезанных изображений исчезает ...

Итак, я хочу, чтобы, когда документ был готов, он загружал все изображения,затем затухает.

Мне нужно использовать jQuery(document).ready(function(), чтобы запустить скрипт, так что .bind('load') в порядке ... Я думаю .. Я довольно нов в этом ...

Это то, что я придумал, но это не работает .. Может быть, кто-то может сказать мне, почему ...

$(document).ready(function() {
     $("#scroller li").each(function(i) {
          $(this).bind('load', function(){
               $(this).delay(400*i).fadeIn();
          });
      });
  });

Answer 1

загрузка уже произошла, так как $ (document) .ready ждет загрузки всего содержимого страницы, прежде чем она запустит функцию.

Вы пытались запустить li или li как скрытые и затем просто сделать это:

$(document).ready(function() {
     $("#scroller li").each(function(i) {
           $(this).delay(400*i).fadeIn();
      });
  });

Answer 2

Звучит так, будто вы хотите предварительно загрузить изображения. Если изображения предварительно загружены, они будут кэшированы, поэтому при первом их отображении все изображение должно отображаться, а не обрезаться. Вы можете предварительно загрузить изображения, просто используя `$ (" "). Attr ('src', 'source / of / image'); Это загружает изображения в память и должно кешировать их заранее. Он не добавит их в DOM.