最近一直在弄广告页,由于广告页几乎都是图片拼凑起来的,为了减少服务器压力和带宽,采用图片懒加载方式,但是我们的图片高度又不确定,所以我在网上下载了echo.js自己改了一下。

大体思路是:让首页先加载几张图片(根据切片大小自己确定能够铺满首页),之后滚动鼠标时在判断下一张图片是否出现,然后将data-echo的值给src,下面是我代码,有不当之处还望大家多多指点!

window.Echo = (function(window, document, undefined) {
'use strict';
var store = [],
offset,//距离多远时开始加载
throttle,//加载图片时间
firstnum,//首页显示图片数量
poll;
var _inView = function(el,num) {
var inView;
if(num<=firstnum){
inView=true;
}else{
var coords = el.getBoundingClientRect();
inView=(coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + parseInt(offset);
}
return inView;
}; var _pollImages = function() {
var num=0;
for(var i=0;i<store.length;i++){
var self=store[i];
num++;
if(_inView(self,num)){
self.src = self.getAttribute('data-echo');
}
}
};
var _throttle = function() {
clearTimeout(poll);
poll = setTimeout(_pollImages, throttle);
};
var init = function(obj) {
var nodes = document.querySelectorAll('[data-echo]');
var opts = obj || {};
offset = opts.offset || 0;
throttle = opts.throttle || 250;
firstnum=opts.firstnum || 0;
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);

调用方法:

Echo.init({
offset:10,
throttle:0,
firstnum:3
})

  大家看了我的随笔记得发表一下意见,共同进步!

js实现图片(高度不确定)懒加载的更多相关文章

  1. js不需要知道图片宽高的懒加载方法(经过实际测试,不加宽高仍然是无法正常加载的,设置height:auto,height:100%,仍然显示高度为0)

    js不需要知道图片宽高的懒加载方法 懒加载是如何实现的? - 简书https://www.jianshu.com/p/e86c61468285找到一个不需要知道图片宽高的懒加载方法了(经过实际测试,不 ...

  2. 使用jquery插件实现图片延迟加载技术(懒加载)

    有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...

  3. vue项目中,单页图片过多,使用懒加载

    最近做项目,一页图片很多,加载的时候效果很差. 通过学习借鉴其他大神的方法,使用了插件vue-lazyload,使用这个插件,界面更美观了,加载的效果好起来. 安装 npm i vue-lazyloa ...

  4. iOS开发基础-图片切换(4)之懒加载

    延续:iOS开发基础-图片切换(3),对(3)里面的代码用懒加载进行改善. 一.懒加载基本内容 懒加载(延迟加载):即在需要的时候才加载,修改属性的 getter 方法. 注意:懒加载时一定要先判断该 ...

  5. iOS开发基础-图片切换(2)之懒加载

    延续:iOS开发基础-图片切换(1),对(1)里面的代码进行改善. 在 ViewController 类中添加新的数组属性:  @property (nonatomic, strong) NSArra ...

  6. 原生js可视加载图片、延迟加载、懒加载

    <script> //既视加载//var oBtn = document.getElementsByTagName('button')[0];var aImages = document. ...

  7. 如何使用echo.js实现图片的懒加载(整理)

    如何使用echo.js实现图片的懒加载(整理) 一.总结 一句话总结:a.在img标签中添加data-echo属性加载真实图片:<img class="loading" sr ...

  8. JS实现图片懒加载插件

    一.前言 我在前几篇博客的记录中,有说自己在做一个图片懒加载的功能,然后巴拉巴拉的遇到哪些问题,结果做完了也没对懒加载这个功能做一些记录,所以这篇文章主要针对我所实现的思路,以及代码做个记录,实现不佳 ...

  9. 前端性能优化成神之路--图片懒加载(lazyload image)

    图片懒加载(当然不仅限于图片,还可以有视频,flash)也是一种优化前端性能的方式.使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求 什么是懒加载 懒 ...

  10. 001_Chrome 76支持原生HTML 图片懒加载Lazy loading

    Table Of Content 什么是懒加载? 语法参数及使用方式? 有哪些特点? 与js有关的实践 什么是懒加载? 技术背景 Web应用需要经常向后台服务器请求资源(通过查询数据库,是非常耗时耗资 ...

随机推荐

  1. 读书笔记-浅析Java运行时数据区

    作为一个 Java 为主语言的程序员,我偶尔也需要 用 C/C++ 写程序,在使用时让我很烦恼的一件事情就是需要对 new 出来的对象进行 delete/free 操作,我老是担心忘了这件事情,从而导 ...

  2. JMockit常用操作

    JMockit常用操作 2017-11-30 转自:http://blog.csdn.net/foreverling/article/details/51234149 目录 1 基本概念  1.1 常 ...

  3. ASP.NET没有魔法——ASP.NET MVC界面美化及使用Bundle完成静态资源管理

    对于一个应用来说界面的重要性无言而喻,而Web应用的界面是使用Html+Css以及Javascript实现的,ASP.NET MVC是一个用来构建Web应用的框架,它的界面也是Html实现的,对于一些 ...

  4. Linux解决MySQL-python安装失败问题

    使用python的pip直接安装MySQL-python的时候遇到如下报错: Collecting mysql-python Using cached MySQL-python-1.2.5.zip C ...

  5. Day3---------网络基础和DOS命令

    一.网络分类 1.地理位置 1).局域网(LAN) 2).城域网(MAN) 3).广域网(WAN) 2.传输介质 1).有线网 2).光纤网 3).无线网 3.层--------设备 传输层----- ...

  6. 【Flask】 使用Flask-Moment进行日期时间的管理

    Flask-Moment Flask-Moment又是一个flask的扩展模块,用来处理时间日期等信息.用这个模块主要是考虑到两点,第一是为了让不同时区的用户看到的都是各自时区的实际时间,而不是服务器 ...

  7. 【Linux】积累笔记

    ■ 关于查看系统的一些版本信息 查看系统的发行版本可以用 cat /etc/issue 或者 cat /etc/redhat-release (Centos上) 查看系统的内核版本以及系统位数 una ...

  8. 数据库 --> 5种关系型数据库比较

    5种关系系数据库比较 目前,商品化的数据库管理系统以关系型数据库为主导产品,技术比较成熟.面向对象的数据库管理系统虽然技术先进,数据库易于开发.维护,但尚未有成熟的产品.国际国内的主导关系型数据库管理 ...

  9. 【ASP.NET Core】如何隐藏响应头中的 “Kestrel”

    全宇宙人民都知道,ASP.NET Core 应用是不依赖服务器组件的,因此它可以独立运行,一般是使用支持跨平台的 Kestrel 服务器(当然,在 Windows 上还可以考虑用 HttpSys,但要 ...

  10. [poj2585]Window Pains_拓扑排序

    Window Pains poj-2585 题目大意:给出一个4*4的方格表,由9种数字组成.其中,每一种数字只会出现在特定的位置,后出现的数字会覆盖之前在当前方格表内出现的.询问当前给出的方格表是否 ...