风云阁资源网

javascript实现图片延迟加载方法汇总(三种方法)
网络编程 2024/11/15 佚名
3 1

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


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


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


实现原理：


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





<img lazy_src="/UploadFiles/2021-04-02/图片路径">


然后在页面加载时，把所有使用了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' "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) "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="/UploadFiles/2021-04-02/a.gif">


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


                                

                                

                                     

                                
风云阁资源网 Design By www.bgabc.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
风云阁资源网 Design By www.bgabc.com
www.bgabc.com 风云阁资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
风云阁资源网 Design By www.bgabc.com