Node.js는 웹페이지 열기 속도를 향상시키기 위해 웹페이지 이미지의 지연된 로딩을 구현합니다.

Node.js는 웹페이지 열기 속도를 향상시키기 위해 웹페이지 이미지의 지연된 로딩을 구현합니다._javascript 기술

WBOY

풀어 주다： 2016-05-16 15:17:55

원래의

1634명이 탐색했습니다.

웹페이지의 로딩 속도를 향상시키는 방법은 여러 가지가 있습니다. jquery.lazyload.js를 사용하여 이미지의 비동기 지연 로딩을 구현하는 것은 이미지가 많은 웹사이트의 웹페이지 열기 속도를 향상시키는 좋은 방법이 될 것입니다. 페이지. 코드준 홈페이지 컬럼 목록 왼쪽에는 PC에서 미리보기 시 기사 썸네일 표시 모듈이 보이는데, 이로 인해 웹페이지 로딩 시간이 어느 정도 길어진다. 이 기사에서는 이미지의 비동기식 지연 로딩 방법을 사용하여 이 웹사이트의 페이지 로딩 속도를 향상시킵니다.

사진은 비동기식으로 로드됩니다. 즉, 페이지의 모든 사진을 한 번에 로드하고 표시할 필요가 없습니다. 사용자가 스크롤 막대를 특정 위치로 밀면 해당 위치의 사진이 로드되고 표시됩니다. 이는 웹페이지의 로딩 속도를 크게 향상시켜 사용자 경험을 더욱 향상시킬 수 있습니다.

웹 페이지를 열 때 모든 사진을 한 번에 로드해야 하는 경우에는 사진이 많은 기술 기사가 있으므로 사용자는 확실히 매우 오랜 시간을 기다려야 합니다. 이 접근 방식은 사용자 경험을 매우 나쁘게 만들며 페이지의 모든 이미지를 한 번에 로드할 필요가 없습니다. 이미지의 비동기식 지연 로딩은 웹 디자인에서 가장 합리적이고 적절한 접근 방식입니다.

jquery.lazyload.js를 사용하여 이미지의 비동기 지연 로딩을 구현합니다. 먼저 jQuery를 로드해야 합니다.

1. JS 플러그인 가져오기:

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.lazyload.js"></script>

로그인 후 복사

2. 페이지에 JavaScript 코드를 삽입합니다:

$(document).ready(function($){
$("img").lazyload({
placeholder:"grey.gif", //加载图片前的占位图片
effect:"fadeIn" //加载图片使用的效果(淡入)
});
});

로그인 후 복사

위의 두 단계를 통해 웹페이지 이미지의 비동기 지연 로딩을 쉽게 구현할 수 있습니다.

자세한 소개를 부탁드립니다.
가끔 대형 웹사이트를 볼 수 있습니다. 페이지에 사진이 많은 경우 해당 행으로 스크롤하면 현재 행의 사진이 즉시 로드됩니다. 이런 방식으로 페이지를 열면 보이는 영역의 사진만 표시됩니다. 추가되고 다른 사진은 추가되지 않습니다. 숨겨진 이미지는 로드되지 않으므로 페이지 로딩 속도가 빨라집니다.

권장: jquery 이미지 지연 로딩 플러그인 jquery.lazyload를 사용하여 이미지 지연을 달성하세요

구현 원칙:

로드를 지연해야 하는 모든 이미지를 다음 형식으로 변경하세요.

<img lazy_src="图片路径" border="0"/>

로그인 후 복사

그런 다음 페이지가 로드되면lazy_src를 사용하여 모든 이미지를 배열에 저장하고 스크롤할 때 표시되는 영역의 상단을 계산한 다음 지연 로드된 이미지의 상단을 현재 표시 영역보다 작게 만듭니다(예: image 가시 영역에 나타나는 이미지의 src 값은lazy_src로 대체됩니다(이미지 로드):

JS 코드:

 lazyLoad = (function() {
 
  var map_element = {};
 
  var element_obj = [];
 
  var download_count = 0;
 
  var last_offset = -1;
 
  var doc_body;
 
  var doc_element;
 
  var lazy_load_tag;
 
  function initVar(tags) {
 
    doc_body = document.body;
 
    doc_element = document.compatMode == 'BackCompat' &#63; doc_body : document.documentElement;
 
    lazy_load_tag = tags || ["img", "iframe"];
 
  };
 
  function initElementMap() {
 
    var all_element = [];
 
    //从所有相关元素中找出需要延时加载的元素
 
    for (var i = 0,
 
len = lazy_load_tag.length; i < len; i++) {
 
      var el = document.getElementsByTagName(lazy_load_tag[i]);
 
      for (var j = 0,
 
len2 = el.length; j < len2; j++) {
 
        if (typeof (el[j]) == "object" && el[j].getAttribute("lazy_src")) {
 
          element_obj.push(all_element[key]);
 
        }
 
      }
 
    }
 
  
 
    for (var i = 0,
 
len = element_obj.length; i < len; i++) {
 
      var o_img = element_obj[i];
 
      var t_index = getAbsoluteTop(o_img); //得到图片相对document的距上距离
 
      if (map_element[t_index]) {
 
        map_element[t_index].push(i);
 
      } else {
 
        //按距上距离保存一个队列
 
        var t_array = [];
 
        t_array[0] = i;
 
        map_element[t_index] = t_array;
 
        download_count++; //需要延时加载的图片数量
 
      }
 
    }
 
  
 
  };
 
  function initDownloadListen() {
 
    if (!download_count) return;
 
    var offset = (window.MessageEvent && !document.getBoxObjectFor) &#63; doc_body.scrollTop : doc_element.scrollTop;
 
    //可视化区域的offtset=document的高+
 
    var visio_offset = offset + doc_element.clientHeight;
 
    if (last_offset == visio_offset) {
 
      setTimeout(initDownloadListen, 200);
 
      return;
 
    }
 
    last_offset = visio_offset;
 
    var visio_height = doc_element.clientHeight;
 
    var img_show_height = visio_height + offset;
 
    for (var key in map_element) {
 
      if (img_show_height > key) {
 
        var t_o = map_element[key];
 
        var img_vl = t_o.length;
 
        for (var l = 0; l < img_vl; l++) {
 
          element_obj[t_o[l]].src = element_obj[t_o[l]].getAttribute("lazy_src");
 
        }
 
        delete map_element[key];
 
        download_count--;
 
      }
 
    }
 
    setTimeout(initDownloadListen, 200);
 
  };
 
  function getAbsoluteTop(element) {
 
    if (arguments.length != 1 || element == null) {
 
      return null;
 
    }
 
    var offsetTop = element.offsetTop;
 
    while (element = element.offsetParent) {
 
      offsetTop += element.offsetTop;
 
    }
 
    return offsetTop;
 
  }
 
  function init(tags) {
 
    initVar(tags);
 
    initElementMap();
 
    initDownloadListen();
 
  };
 
  return {
 
    init: init
 
  }
 
})();

로그인 후 복사

사용방법: 페이지에서 지연로드해야 하는 이미지의 src를lazy_src로 변경한 후 위 js를 body 끝에 넣고 다음을 호출합니다:lazyLoad.init ();
놀리는 방법은 Firebug를 사용하여 임시 이미지의 로딩이 지연되는지 확인할 수 있습니다.
또한:
페이지에 콘텐츠 전환이 포함된 열이 있는 경우 전환 시 콘텐츠의 이미지가 표시되지 않을 수 있습니다. 해결 방법은 다음과 같이 콘텐츠 중에 이미지를 별도로 로드하는 것입니다.

///切换内容的代码…
 
 chlid.find("img[init_src]").each(function(){
 
  $(this).attr("src",$(this).attr("init_src"));
 
  $(this).removeAttr("init_src");
 
 });

로그인 후 복사

이른바

이미지 비동기 로딩은 모든 이미지를 한 번에 로딩할 필요가 없다는 뜻입니다. 지연 로딩 또는 버퍼링 로딩이라고 할 수 있습니다.

필요한지 살펴보겠습니다. 기사에 사진이 너무 많습니다. 기사를 로드할 때 모든 사진을 로드하면 의심할 여지 없이 로딩 속도가 느려지고 사용자가 더 오래 기다리게 됩니다. 그런 기사를 찾고 싶습니다. 웹 페이지가 브라우저 시야 내의 이미지만 로드할 수 있도록 하는 플러그인입니다. 범위 내에 표시되지 않는 이미지는 일시적으로 로드되지 않고 사용자가 슬라이드할 때 점차적으로 로드됩니다. 스크롤 막대는 이 효과를 얻기 위해 사용됩니다.

Lazyload.js는 실제로 jQuery용 플러그인입니다. 전체 이름은 jquery.lazyload.js입니다. 이름만 봐도 기능을 알 수 있습니다. 이는 지연 로딩을 의미합니다. 자바스크립트로 작성되었기 때문에 워드프레스를 포함한 모든 웹페이지에 적합합니다.

지연 로드를 사용하려면 먼저 jQuery를 사용하여 효과를 얻는 jQuery를 로드해야 합니다.

위 내용은 이 글의 전체 내용입니다. 웹 페이지 이미지 지연 로딩을 구현하기 위해 js에 대해 더 깊이 이해하시기 바랍니다.