Без лишних слов, просто посмотрите на пример
Прежде всего, способ писать знаки с картинками
<img data-src = "/image/image.jpg">
Вам необходимо поместить адрес изображения в атрибут data-src , и значение src не требуется, поэтому вы можете напрямую удалить атрибут src .
CSS -код
Для всех изображений с атрибутом data-src мы изначально отобразим статус как невидимый, адаптируя его с помощью прозрачности:
img {непрозрачность: 1; Переход: непрозрачность 0,3S;} img [data-src] {непрозрачность: 0;}Какова цель написания таким образом? Когда изображение загружается, вы сможете увидеть эффект.
Код JavaScript
В конечном итоге мы удалим атрибут data-src и заменим его атрибутом SRC, но это действие после успешного загрузки изображения:
[] .foreach.call (document.queryselectorall ('img [data-src]'), function (img) {img.setattribute ('src', img.getAttribute ('data-src')); img.onload = function () {img.removeattribute ('data-src');По сравнению с другими различными технологиями загрузки задержки изображения этот метод очень прост. Это практически не требует других условий и может использоваться где угодно. Это очень гибко в использовании.
Но следует отметить, что простота имеет лучшую или плокую, и она также будет недостаточной из -за простоты. Он не имеет функции прокрутки изображений в визуальное окно, а затем загружать их. Какая технология использовать в конце зависит от сценария.
Выше приведено в этой статье, я надеюсь, что это будет полезно для всех по работе и изучению.