首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
学习JavaScript编程语言的8张思维导图分享
Mar 27 Javascript
jQuery结合ajax实现动态加载文本内容
May 19 Javascript
JavaScript仿静态分页实现方法
Aug 04 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
May 24 Javascript
JS图片预加载插件详解
Jun 21 Javascript
React Native日期时间选择组件的示例代码
Apr 27 Javascript
Vue组件间通信方法总结（父子组件、兄弟组件及祖先后代组件间）
Apr 17 Javascript
详解jenkins自动化部署vue
May 14 Javascript
微信小程序 select 下拉框组件功能
Sep 09 Javascript
JS数组及对象遍历方法代码汇总
Jun 16 Javascript
纯js+css实现在线时钟
Aug 18 Javascript
js+css3实现炫酷时钟
Aug 18 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
反向代理(2) 负载均衡(6) 动静分离(1) http(6) shell(3) reload(1) https(7) 默认端口(3) 生成缩略图(1) 防盗链(1)
You might like
Thinkphp搭建包括JS多语言的多语言项目实现方法
2014/11/24 PHP
PHP输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
php输出反斜杠的实例方法
2019/09/19 PHP
通过身份证号得到出生日期和性别的js代码
2009/11/23 Javascript
设置checkbox为只读(readOnly)的两种方式
2013/10/11 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
javascript arguments使用示例
2014/12/16 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
关于vue中 $emit的用法详解
2018/04/12 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
2018/09/27 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
vue输入框使用模糊搜索功能的实现代码
2020/05/26 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
python在Windows8下获取本机ip地址的方法
2015/03/14 Python
用python制作游戏外挂
2018/01/04 Python
基于Django ORM、一对一、一对多、多对多的全面讲解
2019/07/26 Python
python conda操作方法
2019/09/11 Python
keras 特征图可视化实例(中间层)
2020/01/24 Python
利于python脚本编写可视化nmap和masscan的方法
2020/12/29 Python
css3动画事件—webkitAnimationEnd与计时器time事件
2013/01/31 HTML / CSS
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
C#里面如何倒序排列一个数组的元素？
2013/06/21 面试题
支教自我鉴定
2014/01/18 职场文书
留学推荐信中文范文三篇
2014/01/25 职场文书
职工运动会感言
2014/02/07 职场文书
主管会计岗位职责
2014/03/13 职场文书
中秋晚会活动方案
2014/08/31 职场文书
我为党旗添光彩演讲稿
2014/09/13 职场文书
2015年药品销售工作总结范文
2015/05/25 职场文书
导游词之南京中山陵
2019/11/27 职场文书
html5调用摄像头实例代码
2021/06/28 HTML / CSS