图片的javascript延时加载

最新推荐文章于 2025-05-01 12:00:00 发布

转载最新推荐文章于 2025-05-01 12:00:00 发布 · 416 阅读

javascript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的图片懒加载技术，该技术通过延迟加载不在可视区域内的图片来提高网页性能。当用户滚动页面时，仅加载进入可视区域的图片。

在页面很长(超过3屏)且图片又很多时，默认情况下浏览器会加载所有图片，有可能导致第二屏的图片显示出来了，但第一屏的图片还在加载，这种情况最适合用"javascript延时加载"来改善用户体验.

原理：

1.根据图片元素距页面顶部的距离，判断图片自身在第几屏

2.所有图片元素的src值先不设置，改而用其它自定义属性，比如src写成lazy_src(这样浏览器就不会主动加载图片)

3.根据1的判断，如果轮到自己登场了(即到顶部的距离变化了，比如用户拉动滚动条了)，则将lazy_src值赋值为src，这样浏览器就开始加载了.

代码：(收集于网上)

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
  <
  html 
  xmlns
  =
  "http://www.w3.org/1999/xhtml"
  >
 
  <
  head
  >
 
  <
  title
  >js延时加载</
  title
  >
 
  <
  script 
  type
  =
  "text/javascript"
  >
 
  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;
 
  //判断是否为IE的"怪异模式"
 
  doc_element = document.compatMode == 'BackCompat' ? 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(el[j]);
 
  }
 
  }
 
  }
 
  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) ? doc_body.scrollTop : doc_element.scrollTop;
 
  //可视化区域的高=offtset+document的高  
 
  var 
  visio_offset 
  = offset + doc_element.clientHeight;
 
  if (last_offset == visio_offset) {
 
  setTimeout(initDownloadListen, 200);//每隔0.2秒检测一次，这玩意儿感觉有些耗资源的
 
  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
 
  }
 
  })();
 
  </script>
 
  <
  style 
  type
  =
  "text/css"
  >
 
  img{height:800px}
 
  </
  style
  >
 
  </
  head
  >
 
  <
  body
  >
 
  <
  div
  >
 
  <
  img 
  lazy_src
  =
  "http://pic.vlike.com/girl/UploadFiles_9401/201005/13/2010051307474029890_big.jpg" 
  /><
  br
  />
 
  <
  img 
  lazy_src
  =
  "http://pic.vlike.com/girl/UploadFiles_9401/201005/13/2010051307474372951_big.jpg" 
  /><
  br
  />
 
  <
  img 
  lazy_src
  =
  "http://pic.vlike.com/girl/UploadFiles_9401/201005/06/2010050616595471474_big.jpg" 
  /><
  br
  />
 
  <
  img 
  lazy_src
  =
  "http://pic.vlike.com/girl/UploadFiles_9401/201005/13/2010051307474693772_big.jpg" 
  /><
  br
  />
 
  <
  img 
  lazy_src
  =
  "http://pic.vlike.com/girl/UploadFiles_9401/201005/05/2010050511370456961_big.jpg" 
  /><
  br
  />
 
  <
  img 
  lazy_src
  =
  "http://pic.vlike.com/girl/UploadFiles_9401/201005/13/2010051311000442310_big.jpg" 
  /><
  br
  />
 
  </
  div
  >
 
  <
  script 
  type
  =
  "text/javascript"
  >
 
  lazyLoad.init(); 
 
  </
  script
  >
 
  </
  body
  >
 
  </
  html
  >