В этой статье описывается метод реализации загрузки задержки изображения в родном JavaScript. Задержка загрузки изображения на самом деле имеет плагин jQuery, а метод загрузки очень прост и разумный. Тем не менее, некоторые друзья думают, что загрузка плагин-пакета jQuery слишком большая, поэтому я написал один, чтобы поделиться им с вами.
Прежде всего, загрузка задержки изображения может сохранить пропускную способность нас и получить лучшую пользовательскую работу, особенно для сайтов с множеством изображений, что имеет решающее значение. Позвольте мне обсудить принцип и код реализации задержки с изображением загрузки с вами ниже.
Принцип загрузки задержки изображения
Принцип загрузки задержки изображения состоит в том, что изображение SRC в HTML не заполняется в реальном адресе изображения, но адрес изображения назначается тегу IMG с помощью пользовательского атрибута, такого как: src = ”img/load.gif” data-url = ”img/1.jpg», а затем судите событие Scrollbar Browser Scrollbar. При достижении определенной точки реальный адрес изображения в пользовательском атрибуте присваивается SRC тега IMG, тем самым реализуя динамический отображение изображения. В реальных проектах адреса этих изображений могут быть переданы через AJAX и назначены на пользовательские свойства IMG.
Native JS реализует пример загрузки задержки изображения:
В конце концов, текстовый контент выглядит немного скучно. Я написал простую демонстрацию и теперь опубликовал весь код. Друзья, которые это нужно, могут скопировать его напрямую, а затем поймете после просмотра кода.
Скопируйте код следующим образом: <! Doctype html>
<html>
<голова>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<Title> Задержка задержки изображения </title>
<style>
img {display: block; width: 350px; высота: 245px; фон: url (img/load.gif) Центр Центр без повторения}
</style>
</head>
<тело>
<div id = "div">
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
</div>
<script type = "text/javascript">
var obj = document.getElementbyId ("div"). getElementsbytagname ("img"),
h = window.innerheight || document.documentelement.clientHeight;
for (var i = 0; i <obj.length; i ++) {
obj [i] .url = obj [i] .getAttribute ("data-url");
obj [i] .top = obj [i] .OffSetTop;
obj [i] .flag = true; // Предотвратить все время загружать картинку, так что после успешной загрузки изображения изображение не будет загружено при прокрутке браузера;
}
var fnload = function (obj) {
var t = document.body.scrolltop || document.documentelement.scrolltop;
if (t+h> obj.top+200 && obj.top> t) {// дай 200 для улучшения состояния загрузки пользователя, это более дружелюбно
settimeout (function () {
obj.src = obj.url;
obj.flag = false;
}, 500)
}
}
window.onscroll = window.onload = function () {
for (var i = 0; i <obj.length; i ++) {
if (obj [i] .flag) {
fnload (obj [i]);
}
}
}
</script>
</body>
</html>
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.