编程 Javascript

javascript实现图片延迟加载方法汇总(三种方法)

Posted in Javascript onAugust 27, 2015

看到一些大型网站，页面如果有很多图片的时候，当你滚动到相应的行时，当前行的图片才即时加载的，这样子的话页面在打开只加可视区域的图片，而其它隐藏的图片则不加载，一定程序上加快了页面加载的速度，对于比较长的页面来说，这个方案是比较好的。原理是这样：页面可见区域以下的图片先不加载，等到用户向下滚动到图片位置时，再进行加载。这样做的好处在哪里？——当页面有好几屏内容时，有可能用户只看前几屏的内容，这样我们就可以只加载用户需要看的图片，减少服务器向用户浏览器发送图片文件所产生的负荷，下面通过三种方法给大家介绍js实现图片延时加载。

js实现图片延迟加载方法一：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
 <head> 
  <title>lazyImage2.html</title> 
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
  <meta http-equiv="description" content="this is my page"> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
  <!--<link rel="stylesheet" type="text/css" href="./styles.css" mce_href="styles.css">--> 
 </head> 
 <body style="text-align:center" mce_style="text-align:center"> 
 <p>  </p><p> </p><p> </p><p> </p><p> </p> 
  <div style="height:1290px;width:800px;border:1px;background:gray;"></div> 
  <div style="height:150px;width:800px;border:1px;background:green;"></div> 
  <img class="lazy" src="images/sprite.gif" mce_src="images/sprite.gif" alt="images/lazyloadImg.jpg" /> 
  <script type="text/javascript"><!-- 
      var temp = -1;//用来判断是否是向下滚动（向上滚动就不需要判断延迟加载图片了） 
      window.onscroll = function() { 
      var imgElements = document.getElementsByTagName("img"); 
      var lazyImgArr = new Array(); 
      var j = 0; 
      for(var i=0; i<imgElements.length; i++) { 
       if(imgElements[i].className == "lazy"){ 
        lazyImgArr[j++] = imgElements[i]; 
       } 
      } 
              var scrollHeight = document.body.scrollTop;//滚动的高度 
      var bodyHeight = document.body.offsetHeight;//body（页面）可见区域的总高度 
      if(temp < scrollHeight) {//为true表示是向下滚动，否则是向上滚动，不需要执行动作。 
       for(var k=0; k<lazyImgArr.length; k++) { 
       var imgTop = lazyImgArr[k].offsetTop;//1305（图片纵坐标） 
       if((imgTop - scrollHeight) <= bodyHeight) { 
        lazyImgArr[k].src = lazyImgArr[k].alt; 
        lazyImgArr[k].className = "notlazy" 
               } 
      } 
      temp = scrollHeight; 
     } 
    }; 
// --></script> 
 </body> 
</html>

js实现网页图片延时加载方法二：

再没贴代码之前先给大家讲下js实现图片延时加载的原理。

实现原理：

把所有需要延时加载的图片改成如下的格式：

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

然后在页面加载时，把所有使用了lazy_src的图片都保存到数组里，然后在滚动时计算可视区域的top，然后把延时加载的图片中top小于当前可视区域（即图片出现在可视区域内）的图片的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' ? 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) ? 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"); 
 });

原生态js实现图片延时加载方法三：

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>通过原生js延迟加载图片</title>
<style type="text/css">
    div{width:100px;height:100px;background:#F00;margin-bottom:30px}
</style>
</head>
<body>
  <div><img data-url="http://www.pokemon.name/w/image/Sprites/PDW/001.png
  " src="a.gif" /></div>
  <div><img data-url="http://www.pokemon.name/w/image/Sprites/PDW/002.png
  " src="a.gif" /></div>
  <div><img data-url="http://www.pokemon.name/w/image/Sprites/PDW/003.png
  " src="a.gif" /></div>
  <div><img data-url="http://www.pokemon.name/w/image/Sprites/PDW/004.png
  " src="a.gif" /></div>
</body>
//以上图片测试时可用复制多点
<script type="text/javascript">
    (function(){
        //common
        function tagName(tagName){
            return document.getElementsByTagName(tagName);
        }
        function $(id){
            return document.getElementById(id);
        }
        function addEvent(obj,type,func){
            if(obj.addEventListener){
                obj.addEventListener(type,func,false);    
            }else if(obj.attachEvent){
                obj.attachEvent('on'+type,func);
            }
        }
        //这里可以按照需要配置些参数
        var v={
            eleGroup:null,
            eleTop:null,
            eleHeight:null,
            screenHeight:null,
            visibleHeight:null,
            scrollHeight:null,
            scrolloverHeight:null,
            limitHeight:null
        }
        //对数据进行初始化
        function init(element){
            v.eleGroup=tagName(element)
            screenHeight=document.documentElement.clientHeight;
            scrolloverHeight=document.body.scrollTop;
            for(var i=0,j=v.eleGroup.length;i<j;i++){
                if(v.eleGroup[i].offsetTop<=screenHeight && v.eleGroup[i].getAttribute('data-url')){
                    v.eleGroup[i].setAttribute('src',v.eleGroup[i].getAttribute('data-url'));
                    v.eleGroup[i].removeAttribute('data-url')
                }    
            }
        }
        function lazyLoad(){
            if(document.body.scrollTop == 0){
                limitHeight=document.documentElement.scrollTop+document.documentElement.clientHeight;
            }else{
                limitHeight=document.body.scrollTop+document.documentElement.clientHeight;
            }
            for(var i=0,j=v.eleGroup.length;i<j;i++){
                if(v.eleGroup[i].offsetTop<=limitHeight && v.eleGroup[i].getAttribute('data-url')){
                    v.eleGroup[i].src=v.eleGroup[i].getAttribute('data-url');
                    v.eleGroup[i].removeAttribute('data-url')
                }    
            }
        }
        init('img')
        addEvent(window,'scroll',lazyLoad);
    })()         
</script>
</html>

以上内容通过三种方法介绍了js实现图片延时加载，希望大家喜欢。

javascript实现图片延迟加载方法汇总(三种方法)

- Author -

mrr

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

在网页中屏蔽快捷键

Sep 06 Javascript

jquery插件tooltipv顶部淡入淡出效果使用示例

Dec 05 Javascript

JavaScript实现穷举排列(permutation)算法谜题解答

Dec 29 Javascript

原生js的数组除重复简单实例

May 24 Javascript

BootStrap的Datepicker控件使用心得分享

May 25 Javascript

微信小程序登录实例详解

Jan 16 Javascript

JavaScript实现简单的文本逐字打印效果示例

Apr 12 Javascript

javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】

Aug 01 Javascript

javascript验证form表单数据的案例详解

Mar 25 Javascript

vue-i18n结合Element-ui的配置方法

May 20 Javascript

详解React的回调渲染模式

Sep 10 Javascript

js+h5 canvas实现图片验证码

Oct 11 Javascript

json+jQuery实现的无限级树形菜单效果代码

Aug 27 #Javascript

jQuery on()方法示例及jquery on()方法的优点

Aug 27 #Javascript

js实现仿京东2级菜单效果(带延时功能)

Aug 27 #Javascript

jQuery UI设置固定日期选择特效代码分享

Aug 27 #Javascript

js实现的早期滑动门菜单效果代码

Aug 27 #Javascript

jQuery实现自动与手动切换的滚动新闻特效代码分享

Aug 27 #Javascript

js实现向右横向滑出的二级菜单效果

Aug 27 #Javascript