Задержка загрузки изображения с помощью jQuery - PullRequest
Новая
       4

Задержка загрузки изображения с помощью jQuery

26 голосов
/ 24 мая 2010

У меня есть страница с несколькими галереями, включая аккордеоны и слайдеры.Проблема в том, что страница загружается вечно.Есть ли способ обернуть изображение в небольшой фрагмент кода или применить к нему класс, чтобы заставить его загружаться только после загрузки всего остального?

Ответы [ 4 ]

55 голосов
/ 24 мая 2010

Конечно, вы можете.Замените ваши атрибуты img src на «#» и добавьте пользовательский атрибут, например, так: 

<img src="#" data-delayedsrc="/img/myimage.png" />

Затем добавьте строку javascript, когда ваша страница загружается, что-то вроде этого: 

$('img').each(function(){
  $(this).attr('src', $(this).data('delayedsrc'));
});
8 голосов
/ 24 мая 2010

Если вы используете jQuery (и я предполагаю, что вы так помечены как таковой), посмотрите на Ленивый плагин загрузки для jQuery . Это задерживает загрузку изображений, которые находятся вне области просмотра, пока пользователь не прокрутит их.

Обновление 2015: этот плагин был сломан в один момент, но теперь снова работает. Последний комментарий говорит так же, но я чуть не пропустил его, потому что он был скрыт в свернутых комментариях.

6 голосов
/ 19 июля 2013

Простой способ отложить загрузку изображений (и iFrames) - это сочетание чистого JS, jQuery.data () и пользовательского атрибута data- * в HTML5. Источник изображения изначально может указывать на загрузочный GIF. Атрибут data- * содержит URL-адрес изображения, которое вы в конечном итоге хотите загрузить. Чистый JS устанавливает задержку (3000 миллисекунд в приведенном ниже примере), а затем выполняет jQuery.data (), которая устанавливает src изображения для предполагаемого изображения.

Пример ниже работает для каждого изображения с class = "load-delay".

Пример в реальном времени : http://seandebutts.com/2013/07/03/html5-delay-loading-images-iframes/

КОД

JS и JQuery: 

$(document).ready(function () {
  setTimeout(function () {
    $('.load-delay').each(function () {
      var imagex = $(this);
      var imgOriginal = imagex.data('original');
      $(imagex).attr('src', imgOriginal);
    });
  }, 3000);
});

Библиотека HTML и jQuery: 

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <meta charset="utf-8" />

</head>
<body>
  <h1>Loading-Delayed Image</h1>
  <img class="load-delay" src="http://i.imgur.com/7ZMlu3C.gif" data-original="http://oi42.tinypic.com/9sqmaf.jpg" />
</body>
</html>
1 голос
/ 24 мая 2010

Сохраните в HTML только одно изображение, чтобы у зрителя было с чего начать, а затем добавьте остальные, используя jQuery с 

$(document).ready(function() {
    //load rest of the images
});

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...