더 이상 고민하지 않고 예제를보십시오
우선, 그림 자국을 작성하는 방법
<img data-src = "/images/image.jpg">
이미지의 주소를 data-src 속성에 넣어야하며 src 값이 필요하지 않으므로 src 속성을 직접 제거 할 수 있습니다.
CSS 코드
data-src 속성이있는 모든 이미지의 경우 처음에는 보이지 않는 상태를 표시하여 투명성을 통해 조정합니다.
img {불투명도 : 1; 전환 : 불투명도 0.3S;} img [data-src] {불투명도 : 0;}이런 식으로 글을 쓰는 목적은 무엇입니까? 그림이로드되면 효과를 볼 수 있습니다.
자바 스크립트 코드
결국 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');});다른 다양한 이미지 지연 로딩 기술과 비교할 때이 방법은 매우 간단합니다. 거의 다른 조건이 필요하지 않으며 어디서나 사용할 수 있습니다. 사용하기가 매우 유연합니다.
그러나 단순성은 최고 또는 나쁜 것이며 단순성으로 인해 충분하지 않을 것입니다. 시각적 창에 그림을 스크롤 한 다음로드하는 기능이 없습니다. 결국 어떤 기술을 사용 해야하는지 시나리오에 따라 다릅니다.
위의 내용은이 기사에 관한 것입니다. 모든 사람의 일과 공부에 도움이되기를 바랍니다.