echo.js 순수한 JavaScript 경량 게으른로드 인스턴스 코드
데모
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> 간단한 JavaScript 이미지 게으른로드 라이브러리 echo.js </title> <tyle> .demo img {width : 736px; 높이 : 490px; 배경 : URL (Images/Loading.gif) 50% no-Repeat;} </style> </head> <hod> <h1 style = "margin : 40px; font : 32px microsoft yahei; 텍스트-정렬 : 센터;"> 간단한 JavaScript Lazy Loading Library echo.js demo <img src = "이미지/blank.f". data-echo = "images/big-1.jpg"> <img src = "images/blank.gif"data-echo = "images/big-2.jpg"> <img src = "images/blank.gif"data-echo = "images/big-3.jpg"> <img src = "images/blank.gif"images/big-4.jpg. src = "images/blank.gif"data-echo = "images/blank.gif"data-echo = "images/big-5.jpg"> <img src = "images/blank.gif"data-echo = "images/big-6.jpg"> <img src = "images/blank.gif"data-echo = "images/big-7.jpg"> </dm> src = "js/echo.min.js"> </script> <cript> echo.init ({오프셋 : 0, 스로틀 : 0}); </script>애플리케이션
1. JS를 소개하고 초기화하십시오
<script src = "{sh :: pub} js/echo.min.js"> </script> <cript> echo.init ({offset : 0, 스로틀 : 0}); </script>2. 사진에 속성을 첨부하십시오
<img src = "{sh :: pub} img/common/blank.gif"data-echo = "{sh : $ goods.logoimg}">3. 언로드 된 이미지, 동적 gif에 대한 기본 배경을 설정하십시오
.lazy {너비 : 100%; 높이 : 100%; 배경 : URL ({sh :: pub} img/common/loading.gif) 50%no-repeat;}매우 편리하고 실용적입니다.
웹 페이지를 여는 속도를 더욱 향상 시키려면 업로드 된 사진을 최적화 할 수 있습니다.
웹 페이지는 느립니다. 그 이상은 그 이상이 아닙니다. 쿼리가 느리고 이미지가 천천히로드되고 이미지에 지연이로드되지 않으며 이미지의 데이터가 너무 큽니다.
이러한 이유에 따라 점차적으로 해결하십시오.
사용자 경험을 향상시킵니다.
echo.js의 순수한 JavaScript Lightweight Lazy Loading에 대한 위의 예제 코드는 편집기가 공유하는 전체 컨텐츠입니다. 나는 그것이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.