it-swarm.com.ru

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

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

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

<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 (например, слайдер nivo), но либо динамически загружать изображения, либо загружать все эти изображения после загрузки всего остального на моей странице. 

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

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

17
matt

Вот что мы сделали, и это прекрасно работает. Мы пропустили установку атрибута 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;
                       });
                   }
               }
           });
  });

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

31
simplyharsh

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

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

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

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

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

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

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

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

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

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

image.onload = function() {
  ...
}
1
Han Dijk

лучший способ использовать это 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);
        }
   });

Пример

0
TarangP