이미지 지연 로드: 이미지 로드를 지연시키는 오픈 소스 플러그인(jQuery)
- 伊谢尔伦원래의
- 2016-11-29 09:17:371199검색
이미지 지연 로딩 기술은 트래픽이 많은 웹사이트에 매우 실용적입니다. 현재 이미지는 웹사이트에서 널리 사용되고 있습니다. 이미지를 처리하지 않으면 서버와 대역폭에 큰 부담을 주게 됩니다. 현재 사용자가 볼 수 있는 영역의 이미지만 렌더링하면 웹사이트 요청 횟수를 크게 줄일 수 있습니다. 네트워크 대역폭 리소스가 줄어들 수 있습니다.
공개
매우 가벼운 이미지 로딩 컴포넌트입니다
최신 브라우저와 IE7+를 지원하며 Github에서 거의 3,000개의 별을 받았습니다(팔로우)
일반 이미지 사용
<img src="bg.png" data-src="img1.jpg" />
Retina 지원 기기의 경우
<img src="bg.png" data-src="img2.jpg" data-src-retina="img2-retina.jpg" />
적용
$(document).ready(function() {
$("img").unveil();
});콜백 지원
$("img").unveil(200, function() {
$(this).load(function() {
this.style.opacity = 1;
});
}); 수동 트리거 지원
$("img").trigger("unveil");jquery_lazyload
대규모 웹사이트의 이미지 로딩을 지연시키고 해당 영역으로 스크롤할 때 렌더링할 수 있습니다. Github에는 4K 팔로어가 있습니다.
참조 jQuery 및lazyload.js 사용
<script src="jquery.js" type="text/javascript"></script> <script src="jquery.lazyload.js" type="text/javascript"></script>
로드를 지연해야 하는 이미지
<img class="lazy" data-original="img/example.jpg" width="640" height="480">
적용
$(function() {
$("img.lazy").lazyload();
}); echo
독립적인 로고형 자바스크립트 이미지 지연 로딩 라이브러리입니다. jQuery를 사용하지 않고 압축 후 2K만 사용합니다.
IE8+ 지원
<body>
<img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg">
<script src="dist/echo.js"></script>
<script>
echo.init({
offset: 100,
throttle: 250,
unload: false,
callback: function (element, op) {
console.log(element, 'has been', op + 'ed')
}
});
// echo.render(); //手动触发调用
</script>
</body>layzr.js
를 사용하세요. 며칠 전에 출시된 작고 빠른 Image Lazy Loading 구성 요소입니다. 종속성(jQuery에 종속되지 않음)은 Retina 장치도 지원합니다.
<script src="layzr.min.js"></script>
<img src="optional/placeholder" data-layzr="normal/image" data-layzr-retina="optional/retina/image">
<script>
var layzr = new Layzr({
attr: 'data-layzr',
retinaAttr: 'data-layzr-retina',
threshold: 0,
callback: null
});
</script>업데이트
그러면 서버가 HTML의 여러 img를 data-src로 변환하도록 하는 방법은 무엇입니까? 사실 매우 간단합니다. 몇 줄의 일반 규칙이면 충분합니다. 예를 들어 node.js에서는 img의 src를 data-src로 변환할 수 있습니다(브라우저의 콘솔에서 직접 F12를 눌러 실행할 수 있습니다). 🎜>
var html = '包含 <img src="http://ourjs.com/img/weixin.jpg"> 的HTML'
html = html.replace(/<img[^>]+>/g, function(imgstr, idx) {
imgstr = imgstr.replace(' src=', ' data-src=')
return imgstr
})