图片懒加载(图片出现在可视区域再加载)

兼容性:兼容目前流行的全部浏览器,包括:兼容到IE6)

使用方法:

  • 引入相应的js文件
    <script src="js/lazy.js"></script>

  • 初始化

Lazy.init(1000);
可以传入延时时间。默认是500ms

注意:

<img src="img/load.gif" data-lazy="img/2.jpg">

src 属性放预加载的图片,data-lazy放实际展示的图片

githut:https://github.com/chenjinxinlove/lazy

   /**
* 兼容ie678不支持bind()办法
* */
if (!function() {}.bind) {
Function.prototype.bind = function(context) {
var self = this
, args = Array.prototype.slice.call(arguments); return function() {
return self.apply(context, args.slice(1));
}
};
} (function () {
var Lazy = function () { };
var _imgs = [],
_num = 0;
/**
* 得到元素相当于窗口的高度
* @param _e 出入元素
* @returns {_number} 返回高度
*/ Lazy.prototype._getEleViewHeight = function (_e) {
if(_e){
var _top = _e.offsetTop,
_c = _e.offsetParent;
while (_c !== null){
_top += _c.offsetTop;
_c = _c.offsetParent;
}
if( typeof window.pageYOffset !== 'undefined'){
return _top - window.pageYOffset;
}
else if(typeof document.compatMode !== 'undefined' && document.compatMode !== "BackCopt"){
return _top - document.documentElement.scrollTop;
}
else{
return _top - document.body.scrollTop;
}
} };
/**
* 得到浏览内窗口高度
* @returns {number}
* @private
*/
Lazy.prototype._getViewHeight = function () {
var _viewHeight = 0;
if( typeof window.innerHeight !== 'undefined' ){
_viewHeight = window.innerHeight;
}
else if(typeof document.compatMode !== 'undefined' && document.compatMode !== "BackCompt"){
_viewHeight = document.documentElement.clientHeight;
}
else{
_viewHeight = document.body.clientHeight;
}
return _viewHeight;
}; Lazy.prototype._getImg = function () {
var _i = document.getElementsByTagName("img");
for(var i = 0, len = _i.length; i < len; i++){
if(typeof (_i[i].getAttribute("data-lazy"))){
_imgs.push(_i[i]);
_num++;
}
}
}; /**
* 导入图片
* @private
*/
Lazy.prototype._loadImg = function () {
if(!_num)return;
var _viewHeihgt = this._getViewHeight();
for(var i = 0, len = _imgs.length; i < len; i++){
var _imgEle = _imgs[i];
if(this._getEleViewHeight(_imgEle) < _viewHeihgt){
_imgEle.src =_imgEle.getAttribute("data-lazy");
delete _imgs[i];
_num--;
}
}
}; /**
* 初始化,可以设置延时
*/
Lazy.prototype.init = function (time) {
this._getImg();
var _time = time || 500;
window.onscroll = window.onload = function () {
setTimeout(function () {
this._loadImg();
}.bind(this),_time);
}.bind(this); } window.Lazy = new Lazy(); })();

  

js 图片懒加载的更多相关文章

  1. JS图片懒加载

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

  2. 【前端优化】js图片懒加载及优化

    一.前言 为啥要对图片使用懒加载?我们首先来聊聊这个问题,对于页面来说架子啊速度影响着最大的就是图片,一张普通的图片可以达到4-5M的大小,而代码压缩也就只有几十KB.当页面图片过多的时候,页面加载速 ...

  3. js图片懒加载(滚动加载)是否生效

    一.什么是懒加载? 对未出现在视野范围内的图片先不进行加载,等到出现在视野范围才去加载. 二.为什么使用懒加载? 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 理论性知识大家都有自 ...

  4. js图片懒加载(滚动加载)判断是否生效

    一.什么是懒加载? 对未出现在视野范围内的图片先不进行加载,等到出现在视野范围才去加载. 二.为什么使用懒加载? 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 理论性知识大家都有自 ...

  5. web性能优化之js图片懒加载

    html <div class="container"> <ul> <li> <div id="first" clas ...

  6. js——图片懒加载

    <img class="js-lazy-image centered" src="./img/dog-running.svg" width="4 ...

  7. 原生js图片懒加载特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. js原生图片懒加载 或 js原生图片预加载,html标签自定义属性

    使用原声js来实现图片预加载,或图片懒加载,小伙伴们可以根据项目需要来结合vue或者是react来进行修改. 一.什么是图片懒加载或什么是图片预加载 当访问一个页面的时候,先把img元素或是其他元素的 ...

  9. jquery 图片懒加载

      jquery 图片懒加载 CreationTime--2018年7月1日14点45分 Author:Marydon 1.源码展示 (function(a){a.fn.lazyload=functi ...

随机推荐

  1. WPF中ComboBox绑定数据库自动读取产生数据

    前台端 <ComboBox HorizontalAlignment="Name="cmb_SSBM" DisplayMemberPath="NAME&qu ...

  2. asp.net自定义404页面

    网上有很多方法,不过大体相同,这只是其中一个方法,亲测有效,记录后面可能会有用 1. 先写好一个404页面 404.aspx在项目根目录下 然后在配置文件中添加 <!-- 注意这个模式,redi ...

  3. zju(9)LCD显示实验

    1.实验目的 1.学习和掌握linux下对IIC的操作方法以及驱动和应用程序的编写: 二.实验内容 1.编写EduKit-IV实验箱Linux操作系统下IIC的驱动,并编写应用程序实现将数据写入EEP ...

  4. Python字符串,元组、列表、字典

    1.字符串 <string>.strip() 去掉两边空格及去指定字符 <string>.split() 按指定字符分隔字符串为数组 <string>.isdigi ...

  5. hibernate学习(3)——api详解对象(2)

    1.   Transaction 事务 事务的操作: 开启事务 beginTransaction() 获得事务 getTransaction() 提交事务:commit() 回滚事务:rollback ...

  6. 代码规范[iOS]

    一.文件系统 二.代码结构 三.常量  宏 四.布局方式  数据持久化 五.网络 六.类目.延展 七.内存.线程 八.其他 九.版本控制.上线相关 十.附录1(公共库) 十一.附录2(公共类目) 十二 ...

  7. JMeter学习-018-JMeter 配置元件之-HTTP信息头管理器-实现 Cookie 登录

    之前写过一篇通过[HTTP Cookie管理器]实现登录态操作的文章,使用时需要配置每个键值对(如下图所示),相对来讲配置比较繁琐.其实,我们也可通过在[HTTP信息头管理器]添加 Cookie 信息 ...

  8. blockdev命令和blkid命令

    blockdev命令和blkid命令 http://www.jb51.net/LINUXjishu/310389.html block相关的命令 这篇文章主要介绍了Linux blockdev命令设置 ...

  9. Android中Animation 详细解读

    Animation从总体来说可以分为两类: 1.Tweened Animations:该类提供了旋转,移动,伸展,淡入淡出等效果 Tweened Animations也有四种类型: 1.     Al ...

  10. AndroidStudio2.0开发环境搭建

    实验内容 下载安装Android Studio 配置使用环境 实验要求 下载安装Android Studio 基本环境配置 实验步骤 1.首先从安卓开发者网站下载最新的Android Studio h ...