Sem mais delongas, basta olhar para o exemplo
Primeiro de tudo, a maneira de escrever marcas de figuras
<img data-src = "/imagens/image.jpg">
Você precisa colocar o endereço da imagem no atributo data-src e src não é necessário, para que você possa remover diretamente src .
Código CSS
Para todas as imagens com o atributo data-src , inicialmente exibiremos o status como invisível, ajustando-o através da transparência:
img {opacidade: 1; Transição: Opacity 0,3s;} img [Data-Src] {Opacity: 0;}Qual é o objetivo de escrever dessa maneira? Quando a imagem carregar, você poderá ver o efeito.
Código JavaScript
Eventualmente, removeremos data-src e o substituiremos pelo atributo SRC, mas esta é a ação após a imagem ser carregada com sucesso:
[] .ForEach.Call (Document.QuerySelectorAll ('img [data-src]'), function (img) {img.setAttribute ('src', img.getAttribute ('data-src'); img.onload = function () {iMg.RremoTitribute ('data-src';);Comparado com outras tecnologias de carregamento de atraso na imagem, esse método é muito simples. Requer quase não outras condições e pode ser usado em qualquer lugar. É muito flexível de usar.
Mas deve -se notar que a simplicidade tem o melhor ou o mal, e também será insuficiente por causa da simplicidade. Ele não tem a função de rolar as imagens na janela visual e depois carregá -las. Qual tecnologia usar no final depende do cenário.
O exposto acima é tudo sobre este artigo, espero que seja útil para o trabalho e o estudo de todos.