前端:lazy load(图片懒加载)——加载显示大量图片的页面优化

标签: 前端 lazy load 懒加载 图片优化
160人阅读 评论(0) 收藏 举报
分类:

   最近写加载大量图片的页面,由于服务器不给了,不能一次性加载全部图片,卡卡的,

于是参考很多github的例子以及博客园——“蜗牛闯红灯”大佬的博客,对页面进行优化,

当你鼠标拉下,浏览到某个div时候,才加载那一块的图片,简称:

1. 图片懒加载 lazy load在页面上的未可视区域可以添加一个滚动条事件,

判断图片位置与浏览器顶端的距离与页面的距离,如果前者小于后者,优先加载。

  什么是图片懒加载问题:

  对于图片过多的页面,为了加速页面加载速度,
所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载。

这样子对于页面加载性能上会有很大的提升,也提高了用户体验。

2、实现方法<img src="loading.gif" data-src="http://xxx.ooo.com" />

然后将页面img标签获取并保存,开启一个定时器,遍历保存的img标签,
判断其位置是否出现在了可视区域内。如果出现在可视区域了那么就把真实的src地址给赋值上。
并且从数组中删除,避免重复判断。 那么你可能会问,如何判断是否出现在可视区域内吗?
那就是你可以获取当前img的相对于文档顶的偏移距离减去scrollTop的距离,
然后和浏览器窗口高度在进行比较,如果小于浏览器窗口则出现在了可视区域内了,
反之,则没有。



如图,往下面拉会出现白色的图案,渐变出下一张图片
如果
1、网速慢,
2、电脑卡
3、图片识别错误等 将会显示一个小小的gif图片,显示正在加载


3、代码:

主要是三个js:jquery,jquery.lazyload,urchin ,大家找找吧,不行我迟点发网盘或者github

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Lazy Load Enabled With FadeIn Effect</title>
 
  <link href="http://www.appelsiini.net/stylesheets/main2.css" rel="stylesheet" type="text/css" />
 
  <style type="text/css">
  #sidebar {
    width: 0px;
  }

  #content {
    width: 770px;
  }
  
  </style>

</head>

<body>
  <div id="wrap"> 
    <div id="header">
      <p>
        <h1>Lazy Load(懒加载)</h1><br />
        <small>Image lazy loader plugin for jQuery.</small>
        <ul id="nav">
          <li id="first"><a href="#" class="active">weblog</a></li>
          <li><a href="#" class="active">projects</a></li>
         
        </ul>
      </p>
    </div>
    </div>
  <div class="entry">

    <img src="img/load.gif" data-original="img/one.png" width="750" height="521" alt="京紫1">
    <img src="img/load.gif" data-original="img/two.png" width="580" height="937" alt="京紫2">
    <img src="img/load.gif" data-original="img/three.png" width="750" height="421" alt="动漫1">
    <img src="img/load.gif" data-original="img/four.png" width="510" height="287" alt="丹特丽安">
    <img src="img/load.gif" data-original="img/five.png" width="750" height="422" alt="动漫2">
    <img src="img/load.gif" data-original="img/six.png"  width="800" height="436" alt="月山比吕"> 
  
  </div>

  <script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
  <script src="jquery.lazyload.js?v=3" type="text/javascript" charset="utf-8"></script> 
  <script src="urchin.js" type="text/javascript"></script> 
  <script type="text/javascript" charset="utf-8">
      $(function() {
          $("img").lazyload({
              effect : "fadeIn",
          });
      });
  </script>


</body>
</html>
   
哎,csdn这新版的编译器都上传不了相片,只好用贴吧的外链....



查看评论

VC++Windows多线程实战图片编辑器

-
  • 1970年01月01日 08:00

前端性能优化--图片懒加载(lazyload image)

话说前头: 上次写了一篇webpack的学习心得,webpack能做到提升前端的性能,其模块打包最终生成一个或少量的文件能够减少对服务端的请求。除此之外,本次的图片懒加载(当然不仅限于图片,还可...
  • nginxs
  • nginxs
  • 2017-08-12 21:13:16
  • 798

lazyload懒加载的使用

1.引用 2.对于要懒加载的图片进行如下属性设置。 其中src为未加载时的图片,dataimg为实际要加载的图片。 3.执行lazyload.init(); 4.分tab的懒加...
  • qq_26562641
  • qq_26562641
  • 2016-09-05 09:24:48
  • 2114

ionic 、ionic-image-lazy-load网络图片的懒加载和和加载效果,居中显示

1、确定使用的是ionic-image-lazy-load 架构git地址:https://github.com/paveisistemas/ionic-image-lazy-load 首先是先将下...
  • QQ417431233
  • QQ417431233
  • 2016-04-23 15:10:16
  • 4889

图片懒加载插件lazyload的使用示例

test * {margin: 0; padding: 0;} body,html {width: 100%; height: 100%;} .conta...
  • u011500781
  • u011500781
  • 2016-03-27 22:26:27
  • 3035

magento lazyload解决方案

magneto框架速度确实慢,也是因为她的可扩展性高,不过还有一些途径来解决它,其中一个就是使用lazyload。 访问天猫的时候会发现她的图片加载是一段一段的,这就是所谓懒加载,原来我做了一个网...
  • guoshenglong11
  • guoshenglong11
  • 2014-11-12 16:50:35
  • 1251

前端如何实现图片懒加载(lazyload) 提高用户体验

定义 图片懒加载又称图片延时加载、惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力。  惰性加载是程序人性化的一种体现,提高用...
  • Magneto7
  • Magneto7
  • 2017-02-17 18:16:04
  • 4649

lazyload使用ajax实现图片异步加载

思路是先用ajax请求图片地址,然后在success里面用Lazyload实现加载图片,这种方式效率高,用户亲和力好...
  • glp717
  • glp717
  • 2017-07-05 18:38:00
  • 736

升级到ionic3 Lazy Loading懒加载,ionic3新建页面

ionic2 CLI新建页面命令: ionic g page home 生成: home.html,home.ts,home.scss三个文件 ionic升级到到3.+之后, ionic g page...
  • u010564430
  • u010564430
  • 2017-06-27 12:03:37
  • 3060

使用jquery.lazyload.js图片预加载(懒加载)遇到的问题,图片加载不出来

1、在使用jquery.lazyload.js时,如果是数据直接在DOM节点直接渲染,并且图片排列规则,使用方法: 给img标签添加的属性有: src可以修改图片还没加载的时候展示的图片 ...
  • caikys
  • caikys
  • 2018-01-30 11:00:13
  • 200
    个人资料
    专栏达人 持之以恒
    等级:
    访问量: 10万+
    积分: 1757
    排名: 2万+
    公告
    博客专栏
    最新评论