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

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

Ответ 1

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

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

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

$('img').each(function(){
  $(this).attr('src', $(this).data('delayedsrc'));
});

Ответ 2

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

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

Ответ 3

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

Приведенный ниже пример выполняется на каждом изображении с class= "задержкой загрузки".

Пример Live: http://seandebutts.com/2013/07/03/html5-delay-loading-images-iframes/

CODE

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>

Ответ 4

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

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

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