1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
  6.      <title>图片赖加载2017-10-17</title>
  7.      <style type="text/css">
  8.          *{padding: 0;margin: 0}
  9.          img{width: 100%;display: block;}
  10.      </style>
  11.  </head>
  12.  <body>
  13.      <div class="lazy-img">
  14.          <img class="jsLoadImg" src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="https://a-ssl.duitang.com/uploads/item/201210/24/20121024113044_vkmru.jpeg">
  15.          <img class="jsLoadImg" src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://img01.sogoucdn.com/app/a/100540002/422283.jpg">
  16.          <img class="jsLoadImg" src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://dl.bizhi.sogou.com/images/2013/08/09/357253.jpg">
  17.          <img class="jsLoadImg" src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://img01.sogoucdn.com/app/a/100540002/422289.jpg">
  18.          <img class="jsLoadImg" src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://dl.bizhi.sogou.com/images/2015/05/29/1184364.jpg">
  19.          <img class="jsLoadImg" src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://dl.bizhi.sogou.com/images/2015/01/27/1063571.jpg">
  20.          <img class="jsLoadImg" src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://dl.bizhi.sogou.com/images/2014/07/16/733793.jpg">
  21.          <img class="jsLoadImg" src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://dl.bizhi.sogou.com/images/2014/11/11/957398.jpg">
  22.          <img class="jsLoadImg" src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://img.bizhi.sogou.com/images/2013/09/22/387997.jpg">
  23.          <img class="jsLoadImg" src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://img.bizhi.sogou.com/images/2015/04/28/1159147.jpg">
  24.          <img class="jsLoadImg" src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://dl.bizhi.sogou.com/images/2015/06/01/1186941.jpg">
  25.          <img class="jsLoadImg" src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://dl.bizhi.sogou.com/images/2013/07/19/348659.jpg">
  26.          <img class="jsLoadImg" src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://dl.bizhi.sogou.com/images/2013/07/19/348291.jpg">
  27.      </div>
  28.  <!-- <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> -->
  29.  <script type="text/javascript">
  30.      // 图片赖加载js代码
  31.      window.Echo=(function(window,document,undefined){'use strict';var store=[],offset,throttle,poll;var _inView=function(el){var coords=el.getBoundingClientRect();return((coords.top>=0&&coords.left>=0&&coords.top)<=(window.innerHeight||document.documentElement.clientHeight)+parseInt(offset));};var _pollImages=function(){for(var i=store.length;i--;){var self=store[i];if(_inView(self)){self.src=self.getAttribute('data-src');store.splice(i,1);}}};var _throttle=function(){clearTimeout(poll);poll=setTimeout(_pollImages,throttle);};var init=function(obj){var nodes=document.querySelectorAll('[data-src]');var opts=obj||{};offset=opts.offset||0;throttle=opts.throttle||250;for(var i=0;i<nodes.length;i++){store.push(nodes[i]);}_throttle();if(document.addEventListener){window.addEventListener('scroll',_throttle,false);}else{window.attachEvent('onscroll',_throttle);}};return{init:init,render:_throttle};})(window,document);
  32.  
  33.      Echo.init({
  34.          offset: 100,//离可视区域多少像素的图片可以被加载
  35.          throttle: 0,//图片延时多少毫秒加载
  36.          els: '.jsLoadImg',
  37.          elP: '.lazy-img',
  38.          dataSrc: 'data-src'
  39.      });
  40.  </script>
  41.  </body>
  42.  </html>

原理是把真实的图片路径放在data-src里面，先加载src里面的小图片，等页面滚动到相应的位置，就把data-src的内容赋给src。

主要代码是“图片赖加载js代码”，然后调用传参数，跟使用jquery插件一样，只不过这里不需要jquery。

效果如下：

1、没有赖加载的时候要加载13M

2、有赖加载的时候只需先加载2.6M

因为我这里用的图片很多都是在不同的域名下的，所以它们可以同时加载，如果图片都是在同一域名下的效果更佳明显。

JS图片赖加载例子的更多相关文章

  1. js图片实时加载

    浏览大型网站,特别是图片比较多的图片,如大型的电商网站,你会发现处了第一屏外,往下滚动的时候图片才加载出来,没必要一开始加载就要把全部图片加载出来,这样子打开网面的速度得到了很好提高.以下是笔者目前所 ...

  2. js图片未加载完显示loading效果

    <html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...

  3. JS图片预加载插件

    在开发H5项目中有时候会遇到要加载大量图片的情况,利用预加载技术可以提高用户浏览时的体验. 1)概念:懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片.预加载:提前加载 ...

  4. js图片预加载

    图片预加载有大体有几种方式 1.html标签或css加载图片. 显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载.但是为了避免初次载入过多图片影响体验 ...

  5. JS图片懒加载

    简介 当页面图片太多时,加载速度就会很慢.尤其是用2G/3G/4G访问页面,不仅页面慢,而且还会用掉很多流量.图片懒加载的原理就是将页面内所有需要加载的图片全部换成一张默认的图片(一般尺寸很小),只有 ...

  6. js 图片懒加载

    图片懒加载(图片出现在可视区域再加载) 兼容性:兼容目前流行的全部浏览器,包括:兼容到IE6) 使用方法: 引入相应的js文件<script src="js/lazy.js" ...

  7. js图片预加载与延迟加载

    图片预加载的机制原理:就是提前加载出图片来,给前端的服务器有一定的压力. 图片延迟加载的原理:为了缓解前端服务器的压力,延缓加载图片,符合条件的时候再加载图片,当然不符合的条件就不加载图片.​ 预加载 ...

  8. js图片预加载后触发操作

    为了使得图片加载完,再触发回调函数,需进行图片预加载处理 function loadImage(url, callback) { var img = new Image(); img.src = ur ...

  9. js图片预加载以及延迟加载

    当我们需要做图片轮播的时候,如果让图片提前下载到本地,用浏览器缓存起来,我们可以用Image对象: function preLoadImg(){ var img=new Image(); img.sr ...

随机推荐

  1. javascript jquery console调试方法说明

    控制台(Console)是Firebug的第一个面板,也是最重要的面板,主要作用是显示网页加载过程中产生各类信息. 一.显示信息的命令 Firebug内置一个console对象,提供5种方法,用来显示 ...

  2. 二 ASP.NET MVC 第一个程序 hello world

    二 ASP.NET MVC 第一个程序 hello world   https://blog.csdn.net/xmroom/article/details/51335917 我使用的Visual s ...

  3. 康奈尔大学CFD课程

    先上链接:https://confluence.cornell.edu/display/SIMULATION/Home 如果不会FQ,可以去edx:https://courses.edx.org/co ...

  4. 洛谷 P3233 [HNOI2014]世界树(虚树+dp)

    题面 luogu 题解 数据范围已经告诉我们是虚树了,考虑如何在虚树上面\(dp\) 以下摘自hzwer博客: 构建虚树以后两遍dp处理出虚树上每个点最近的议事处 然后枚举虚树上每一条边,考虑其对两端 ...

  5. CH2401 送礼物 双向搜索

    双向搜索:把前一半的可行状态搜出来,然后sort+unique,之后搜后一半时,结束时二分一下前一半的答案,拼出一个与W尽量接近的ans来更新 ps:距LYD说前一半取n/2+2时跑的最快...不知, ...

  6. Win10如何新建用户怎么添加新账户

    https://jingyan.baidu.com/article/25648fc162d5899190fd0069.html 很多朋友都是安装完Windows10系统后,直接使用超级管理员账号登录系 ...

  7. kafka producer参数详解

    https://my.oschina.net/u/218540/blog/1794669/

  8. jQuery随笔-自定义属性获取+tooltip

    1.Jquery自定义属性获取 1) 通过自定义属性值获取document console.log($('[data-id='+item_id+']',listWrap)); $('[data-id= ...

  9. 转 Oracle]如何在Oracle中设置Event

    https://www.cnblogs.com/gaojian/p/7619960.html 为了调查Oracle 的故障,可以通过设置event ,来了解详细的状况.方法如下: ■ 如果使用 SPF ...

  10. selenium原理和尝试

    引用文章:https://www.cnblogs.com/Albert-Lee/p/6238866.html Selenium是一个自动化测试框架.因为它能够模拟人工操作,比如能在浏览器中点击按钮.在 ...