Простое ленивый загрузка изображение с Эффектом

Один из самых быстрых и простых оптимизации производительности веб-сайт снижается загрузку изображений. Это означает, что множество вещей, в том числе minifying изображения с инструментами, как ImageOptim и TinyPNG, используя URI, данных и спрайты, и ленивые изображения загрузки. Это немного резкий, когда вы ленивые изображения загрузки, и они просто не появляются из ниоткуда, который является, почему я люблю замирание в маршруте. Страница все еще тасует если вы явно не установив размеры изображения, но исчезают в действительно обеспечивает крошечную класса. Я видел много решений, которые выполнения этого (некоторые не очень хорошо, как мой старый метод), поэтому я думал, что я хотел бы поделиться моей текущей реализации.

HTML

<img alt="" data-src="/path/to/image.jpg" />

Использование data-src представлять возможную URL.

CSS

Любое изображение с атрибутом данных SRC должна начинаться как невидимые и в конечном итоге переход на непрозрачность:

img {
opacity: 1;
transition: opacity 0.3s;
}

img[data-src] {
opacity: 0;
}


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

JavaScript

Удалением атрибута data-src, когда изображение загружен:

[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) {
img.setAttribute('src', img.getAttribute('data-src'));
img.onload = function() {
img.removeAttribute('data-src');
};
});


Это решение требует JavaScript. Для решения запасного варианта вы можете сделать это:

[].forEach.call(document.querySelectorAll('noscript'), function(noscript) {
var img = new Image();
img.setAttribute('data-src', '');
img.parentNode.insertBefore(img, noscript);
img.onload = function() {
img.removeAttribute('data-src');
};
img.src = noscript.getAttribute('data-src');
});


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

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