Ответ 1

Способ асинхронной загрузки (отложенной загрузки) содержимого состоит в том, чтобы не устанавливать атрибут 'src', а затем выполнить скрипт, который загружает изображения после запуска DOM-ready.

 <img data-lazysrc='http://www.amazingjokes.com/images/20140902-amazingjokes-title.png'/>

и с jQuery (или возможно с простым JavaScript) используйте код ниже (как предложено здесь):

<script>  
function ReLoadImages(){
    $('img[data-lazysrc]').each( function(){
        //* set the img src from data-src
        $( this ).attr( 'src', $( this ).attr( 'data-lazysrc' ) );
        }
    );
}

document.addEventListener('readystatechange', event => {
    if (event.target.readyState === "interactive") {  //or at "complete" if you want it to execute in the most last state of window.
        ReLoadImages();
    }
});
</script>

Ответ 2

var img = new Image(),
    url = "myimg.jpg",
    container = document.getElementById("holder-div");

img.onload = function () { container.appendChild(img); };
img.src = url;

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

Есть много других способов сделать это...
Это просто простой пример асинхронной загрузки одного изображения.

Но мораль это:
Для загрузки async для работы загрузите его в JavaScript и используйте onload или включите тег изображения на странице без атрибута src (укажите width и height в HTML) и вернитесь к некоторым точки, в JS и установите URL-адрес изображения.

Ответ 3

<img async src="myimage.jpg" />

Тег изображения не поддерживает любой асинхронный атрибут.

http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element

Ответ 4

В то время как пример @Norguard довольно прост и достаточно прост для изображения или двух, я нашел echo.js довольно удобным для ленивой загрузки, https://github.com/toddmotto/echo.

Он делает ленивые загрузки изображений с атрибутами data- * и поставляется с некоторыми опрятными и другими вещами.

<img data-echo="img/photo.jpg">
<script src="dist/echo.js"></script>
<script>
    echo.init();
</script>

Ответ 5

Если вы используете jQuery, я сделал что-то простое, но эффективное, например:

HTML

<div data-lazy-load-image="/Images/image-name.png" data-image-classname="pop-in"></div>

JavaScript

$(function () {
    $("[data-lazy-load-image]").each(function (index, element) {
        var img = new Image();
        img.src = $(element).data("lazy-load-image");
        if (typeof $(element).data("image-classname" !== "undefined"))
            img.className = $(element).data("image-classname");
        $(element).append(img);
    });
});

CSS

@-webkit-keyframes pop-in {
    0% { opacity: 0; -webkit-transform: scale(0.5); }
    100% { opacity: 1; -webkit-transform: scale(1); }
}
@-moz-keyframes pop-in {
    0% { opacity: 0; -moz-transform: scale(0.5); }
    100% { opacity: 1; -moz-transform: scale(1); }
}
@keyframes pop-in {
    0% { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}

Вы можете расширить это, включив дополнительные необязательные атрибуты для каждого изображения, но вы получите эту идею.

Это будет ждать, пока DOM будет готов, а затем динамически (асинхронно) загрузит изображения в элемент, который вы отмечаете с помощью атрибута data-lazy-load-image. Я включил CSS, чтобы сделать изображения "pop in", когда они загружены.

Ответ 6

Я вижу много ответов здесь, используя Jquery или какую-то library просто чтобы выполнить эту простую задачу. Это можно сделать с помощью Promise в javascripts, который служит для асинхронного выполнения действий.

function asyncImageLoader(url){
    return new Promise( (resolve, reject) => {
        var image = new Image()
        image.src = url
        image.onload = () => resolve(image)
        image.onerror = () => reject(new Error('could not load image'))
    })
}    

// then use it like this

var image = asyncImageLoader(url)


image.then( res => {
    console.log(res)
})

Ответ 7

Я использовал следующий подход с jQuery.

Во-первых, не используйте атрибут "src" в теге изображения, но поместите ваш источник в другой атрибут, например так:

<img async-src="/mydirectory/myimage.jpg" />

Затем в функции готовности документов jQuery я использую этот код для копирования элемента async-src в элемент src:

$("img[async-src]").each(function(index) {
    $(this).attr("src", $(this).attr("async-src"));
});

Заметки:

Функция jQuery.each может обрабатывать теги в той последовательности, в которой они закодированы в HTML/DOM, но размеры изображений и проблемы в сети могут означать, что изображения фактически не загружаются последовательно. Другими словами, ваше третье изображение async-src может визуально отображаться на экране до того, как первая завершит загрузку.

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

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

$("img[async-src]").each(function(index) {
    $(this).load(function() {
        // code to run after loading
    });
    $(this).attr("src", $(this).attr("async-src"));
});

Ответ 8

Подробнее о атрибуте lazyload вы можете узнать:

<img src="myimage.jpg" alt="some description" lazyload/> - with default values

или вы можете расставить приоритеты:

<img src="myimage.jpg" alt="some description" lazyload="1"/>
<img src="myimage.jpg" alt="some description" lazyload="2"/>

Ответ 9

В то время как в нескольких других ответах описываются способы асинхронной выборки изображений, также может быть полезно знать, что тег <img /> поддерживает атрибут, который служит подсказкой для браузера, что может привести к асинхронному декодированию изображений. Похоже, он не поддерживается Internet Explorer.

<img src="myimage.jpg" decoding="async"/>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#attr-decoding

https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decoding

https://github.com/whatwg/html/issues/1920

Ответ 10

В настоящее время с WHATWG существует открытый запрос на извлечение атрибута loading для изображений и фреймов.

Загрузка = Ленивый

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

<img src="defer.png" loading="lazy" alt="An Awesome Image" width="500" height="400">

Установка атрибута в lazy вызывает новое поведение.

Это уже в Chromium начиная с v76, но, возможно, он не попадет в браузеры без Chromium, пока не пройдет обычные спецификации shennanigans.

Если вы собираетесь отложить загрузку с помощью скрипта, то было бы целесообразно написать изображение с атрибутом lazy и полифиллинг поведения в отличие от отработки имени класса и т.д. Таким образом, вы можете разрешить нативную версию вступить во владение, когда это станет доступным.

Принудительная энергичная загрузка

Автоматическая отложенная загрузка может стать особенностью облегченного просмотра, в этом случае вы можете сделать обратное и принудительно загрузить изображение. Вы можете использовать тот же атрибут loading со значением eager, чтобы попросить браузер захватить изображение, даже если в противном случае он может отказаться.

<img src="defer.png" loading="eager" alt="An Awesome Image" width="500" height="400">

Дальнейшее чтение

Просмотр запроса на получение спецификации WHATWG

Резервный JavaScript с примечаниями о том, что возможно не использовать резервные версии

Ответ 11

Ваше решение lazy-loading-image

https://github.com/tuupola/jquery_lazyload

Удачи.