JQuery, JavaScript, HTML: как загружать изображения после загрузки всего остального?

Эй, ребята, У меня очень сложная страница с большим количеством скриптов и довольно длительным временем загрузки. В верхней части этой страницы я хочу реализовать jquery Nivo Slider (http://nivo.dev7studios.com/).

В документации говорится, что я должен перечислить все изображения для слайдера внутри ползунка div #

<div id="slider">
    <img src="images/slide1.jpg" alt="" />
    <a href="#" onclick="location.href='http://dev7studios.com'; return false;"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
    <img src="images/slide4.jpg" alt="" />
</div>

Однако у меня может быть 10 изображений с размером 1000x400 пикселей, что довольно велико. Эти изображения загружаются при загрузке страницы. Поскольку они находятся в моем заголовке, это может занять некоторое время.

Я ищу способ использовать любой jQuery Slider Plugin (например, слайдер nivo), но либо динамически загружать изображения, либо загружать все эти изображения после того, как все остальное на моей странице загрузилось.

Какую идею я могу решить?

Есть ли способ запустить javascript-процесс после загрузки всего остального на странице? Если есть способ, у меня может быть решение для моей проблемы (используя метод jquery ajax load())... Однако я не знаю, как ждать загрузки всего остального, а затем запустить ползунок со всеми изображениями.

Ответ 1

Вот что мы сделали и работаем отлично. Мы пропустили установку атрибута src img и добавили img-location в поддельный атрибут lsrc. Затем мы загружаем динамическое изображение с lsrc значением и устанавливаем src фактического изображения только после его загрузки.

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

Здесь код.

 $(function(){
    $.each(document.images, function(){
               var this_image = this;
               var src = $(this_image).attr('src') || '' ;
               if(!src.length > 0){
                   //this_image.src = options.loading; // show loading
                   var lsrc = $(this_image).attr('lsrc') || '' ;
                   if(lsrc.length > 0){
                       var img = new Image();
                       img.src = lsrc;
                       $(img).load(function() {
                           this_image.src = this.src;
                       });
                   }
               }
           });
  });

Изменить: Trick - установить атрибут src только тогда, когда этот источник загружен во временный img. $(img).load(fn); обрабатывает это.

Ответ 2

В дополнение к ответу Xhalent используйте функцию .append() в jQuery, чтобы добавить их в DOM:

В вашем HTML будет только:

<div id="slider">
</div>

И тогда ваш jquery будет:

jQuery(function(){
    $("#slider").append('<img src="images/slide1.jpg" alt="" />');
});

Ответ 3

проверить событие jquery load(), он ждет все, включая графику

$(window).load(function () {
  // run code
});

при загрузке вы можете загрузить изображения, используя:

var image = new Image();
image.src = "/path/to/huge/file.jpg";

Вы можете добавить функцию onload к изображению тоже

image.onload = function() {
  ...
}

Ответ 4

jquery имеет синтаксис для выполнения javascript после загрузки документа:

<script type="text/javascript">
jQuery(function(){

//your function implementation here...

});
</script>