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

Question

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

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

<div id="slider">
    <img src="images/slide1.jpg" alt="" />
    <a href="http://dev7studios.com"><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 (например, слайдер nivo), но либо динамически загружайте изображения, либо загружайте все эти изображения после загрузки всего остального на моей странице.

Есть идеи, как мне это решить?

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

Answer 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;
                       });
                   }
               }
           });
  });

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

Answer 2

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

Ваш HTML просто будет иметь:

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

А затем ваш jqueryбудет:

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

Answer 3

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

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

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

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

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

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

Answer 4

лучший способ использовать это b -lazy js .bLazy - это легкий ленивый скрипт для загрузки изображений (менее 1,2 КБ, сжатый и сжатый).Это позволяет вам лениво загружать и мульти-обслуживать ваши изображения, чтобы вы могли сохранить пропускную способность и запросы сервера.Пользователь будет быстрее загружать данные и сохранять загруженные данные, если он не просматривает всю страницу.Полный список параметров, функций и примеров приведен в сообщении в блоге: http://dinbror.dk/blog/blazy.

В следующем примере приведен пример отложенной загрузки многоадресных адаптивных изображений с обратным вызовом изображения :) Если ширина вашего устройства меньшечем 420 пикселей, он будет служить более легкой и уменьшенной версией изображения.Когда изображение загружено, оно удаляет загрузчик в обратном вызове.

В HTML

 <img class="b-lazy"
     src="placeholder-image.jpg"
     data-src="image.jpg"
     data-src-small="small-image.jpg"
     alt="Image description" />

В js

var bLazy = new Blazy({
        breakpoints: [{
        width: 420 // Max-width
          , src: 'data-src-small'
    }]
      , success: function(element){
        setTimeout(function(){
        // We want to remove the loader gif now.
        // First we find the parent container
        // then we remove the "loading" class which holds the loader image
        var parent = element.parentNode;
        parent.className = parent.className.replace(/\bloading\b/,'');
        }, 200);
        }
   });

Пример

Answer 5

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

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

//your function implementation here...

});
</script>