이미지 지연 로드: 이미지 로드를 지연시키는 오픈 소스 플러그인(jQuery)-JS 튜토리얼-php.cn

이미지 지연 로드: 이미지 로드를 지연시키는 오픈 소스 플러그인(jQuery)

伊谢尔伦

풀어 주다： 2016-11-29 09:17:37

원래의

1198명이 탐색했습니다.

이미지 지연 로딩 기술은 트래픽이 많은 웹사이트에 매우 실용적입니다. 현재 이미지는 웹사이트에서 널리 사용되고 있습니다. 이미지를 처리하지 않으면 서버와 대역폭에 큰 부담을 주게 됩니다. 현재 사용자가 볼 수 있는 영역의 이미지만 렌더링하면 웹사이트 요청 횟수를 크게 줄일 수 있습니다. 네트워크 대역폭 리소스가 줄어들 수 있습니다.

공개

매우 가벼운 이미지 로딩 컴포넌트입니다

최신 브라우저와 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, &#39;has been&#39;, op + &#39;ed&#39;)
    }
  });
  // 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: &#39;data-layzr&#39;, 
 retinaAttr: &#39;data-layzr-retina&#39;, 
 threshold: 0, 
 callback: null 
});
</script>

로그인 후 복사

업데이트

그러면 서버가 HTML의 여러 img를 data-src로 변환하도록 하는 방법은 무엇입니까? 사실 매우 간단합니다. 몇 줄의 일반 규칙이면 충분합니다. 예를 들어 node.js에서는 img의 src를 data-src로 변환할 수 있습니다(브라우저의 콘솔에서 직접 F12를 눌러 실행할 수 있습니다). 🎜>

var html = &#39;包含 <img src="http://ourjs.com/img/weixin.jpg"> 的HTML&#39;
html = html.replace(/<img[^>]+>/g, function(imgstr, idx) {
  imgstr = imgstr.replace(&#39; src=&#39;, &#39; data-src=&#39;)
  return imgstr
})

로그인 후 복사