Este artigo descreve o método de realizar o carregamento de atraso na imagem em JavaScript nativo. O carregamento de imagem atrasado na verdade possui um plug-in jQuery e o método de carregamento é muito simples e razoável. No entanto, alguns amigos pensam que carregar o pacote de plug-in jQuery é muito grande, então escrevi um sozinho para compartilhá-lo com você.
Primeiro de tudo, o carregamento de atraso da imagem pode salvar a largura de banda dos EUA e obter uma melhor experiência do usuário, especialmente para sites com muitas fotos, o que é crucial. Deixe -me discutir o princípio e o código de implementação do atraso na imagem, carregando com você abaixo.
Princípio de carregamento de atraso de imagem
O princípio do carregamento de atraso na imagem é que a imagem SRC no HTML não está preenchida no endereço da imagem real, mas o endereço da imagem é atribuído à tag IMG com um atributo personalizado, como: src = "img/carreging.gif" data-url = "img/1.jpg" e julgar o browser scrollBar através de js. Ao atingir um certo ponto, o endereço real da imagem no atributo personalizado é atribuído ao SRC da tag IMG atual, percebendo assim a exibição dinâmica da imagem. Em projetos reais, os endereços dessas imagens podem ser passados pelo AJAX e atribuídos às propriedades personalizadas do IMG.
JS nativo implementa o atraso de atraso de imagem Exemplo:
O conteúdo do texto parece um pouco chato, afinal. Escrevi uma demonstração simples e agora publico todo o código. Amigos que precisam podem copiá -lo diretamente e você entenderá depois de olhar para o código.
Copie o código da seguinte forma: <! Doctype html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<title> carregamento de atraso na imagem </title>
<estilo>
img {display: block; largura: 350px; altura: 245px; background: url (img/carreging.gif) central central sem repetição}
</style>
</head>
<Body>
<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; // impedem que o navegador carregue a imagem o tempo todo, de modo que, após a imagem ser carregada com sucesso, a imagem não será carregada quando o navegador for rolado;
}
var fnload = function (obj) {
var t = document.body.scrolltop || document.documentElement.scrolltop;
if (t+h> obj.top+200 && obj.top> t) {// Dê 200 para melhorar o status de carregamento do usuário, é mais amigável
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>
Espero que este artigo seja útil para a programação JavaScript de todos.