js实现图片(高度不确定)懒加载
最近一直在弄广告页,由于广告页几乎都是图片拼凑起来的,为了减少服务器压力和带宽,采用图片懒加载方式,但是我们的图片高度又不确定,所以我在网上下载了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实现图片(高度不确定)懒加载的更多相关文章
- js不需要知道图片宽高的懒加载方法(经过实际测试,不加宽高仍然是无法正常加载的,设置height:auto,height:100%,仍然显示高度为0)
js不需要知道图片宽高的懒加载方法 懒加载是如何实现的? - 简书https://www.jianshu.com/p/e86c61468285找到一个不需要知道图片宽高的懒加载方法了(经过实际测试,不 ...
- 使用jquery插件实现图片延迟加载技术(懒加载)
有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...
- vue项目中,单页图片过多,使用懒加载
最近做项目,一页图片很多,加载的时候效果很差. 通过学习借鉴其他大神的方法,使用了插件vue-lazyload,使用这个插件,界面更美观了,加载的效果好起来. 安装 npm i vue-lazyloa ...
- iOS开发基础-图片切换(4)之懒加载
延续:iOS开发基础-图片切换(3),对(3)里面的代码用懒加载进行改善. 一.懒加载基本内容 懒加载(延迟加载):即在需要的时候才加载,修改属性的 getter 方法. 注意:懒加载时一定要先判断该 ...
- iOS开发基础-图片切换(2)之懒加载
延续:iOS开发基础-图片切换(1),对(1)里面的代码进行改善. 在 ViewController 类中添加新的数组属性: @property (nonatomic, strong) NSArra ...
- 原生js可视加载图片、延迟加载、懒加载
<script> //既视加载//var oBtn = document.getElementsByTagName('button')[0];var aImages = document. ...
- 如何使用echo.js实现图片的懒加载(整理)
如何使用echo.js实现图片的懒加载(整理) 一.总结 一句话总结:a.在img标签中添加data-echo属性加载真实图片:<img class="loading" sr ...
- JS实现图片懒加载插件
一.前言 我在前几篇博客的记录中,有说自己在做一个图片懒加载的功能,然后巴拉巴拉的遇到哪些问题,结果做完了也没对懒加载这个功能做一些记录,所以这篇文章主要针对我所实现的思路,以及代码做个记录,实现不佳 ...
- 前端性能优化成神之路--图片懒加载(lazyload image)
图片懒加载(当然不仅限于图片,还可以有视频,flash)也是一种优化前端性能的方式.使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求 什么是懒加载 懒 ...
- 001_Chrome 76支持原生HTML 图片懒加载Lazy loading
Table Of Content 什么是懒加载? 语法参数及使用方式? 有哪些特点? 与js有关的实践 什么是懒加载? 技术背景 Web应用需要经常向后台服务器请求资源(通过查询数据库,是非常耗时耗资 ...
随机推荐
- Django高级部分
Django高级部分 1.上传图片: 当Django在处理文件上传的时候,文件数据被保存在request.FILES,FILES中的每个键为<input type="file" ...
- 使用shutdown命令实现局域网内远程关机、重启整蛊他人
用法: shutdown [/i | /l | /s | /r | /g | /a | /p | /h | /e | /o] [/hybrid] [/soft] [/f] [/m \\compu ...
- node 自动重启 nodemon
最近在玩node,可是每次修改完js,总要重启下服务,还要杀掉端口,感觉可麻烦了,最近发现nodemon这个东西很好,直接解决了我的烦恼. npm install -g nodemon 以后直接启动n ...
- 笔记:Spring Cloud Ribbon 客户端负载均衡
Spring Cloud Ribbon 是一个基于 HTTP 和 TCP 的客户端负载均衡工具,基于 Netflix Ribbon 实现,通过Spring Cloud 的封装,可以让我们轻松的将面向服 ...
- ELK学习笔记(一)安装Elasticsearch、Kibana、Logstash和X-Pack
最近在学习ELK的时候踩了不少的坑,特此写个笔记记录下学习过程. 日志主要包括系统日志.应用程序日志和安全日志.系统运维和开发人员可以通过日志了解服务器软硬件信息.检查配置过程中的错误及错误发生的原因 ...
- 避免uncaughtException错误引起node.js进程崩溃
uncaughtException 未捕获的异常, 当node.js 遇到这个错误,整个进程直接崩溃. 或许这俩个人上辈子一定是一对冤家. 或许这俩个人经历了前世500次的回眸才换来了今生的相遇,只可 ...
- Jmeter----基本介绍(1)
1.Jmeter 基本介绍 简单的说,就是Jmeter能做 功能测试 和 性能测试 .它能够对HTTP和FTP服务器进行压力和性能测试, 也可以对任何数据库进行同样的测试,还能以多种形式展现测试结果. ...
- 【Python】excel读写操作 xlrd & xlwt
xlrd ■ xlrd xlrd模块用于读取excel文件内容 基本用法: workbook = xlrd.open_workbook('文件路径') workbook.sheet_names() # ...
- 使用ADO.NET查询和访问数据库
使用ADO.NET查询和访问数据库步骤 使用ADO.NET查询和访问数据库 连接数据库操作: 1. 定义连接字符串: String connString = "Data Sour ...
- 使用Python中的mock模块进行单元测试
在进行单元测试的时候,有时候会遇到这种情况: 出于某些原因,我们不想测试某一部分内容,但是我们想要测试的部分却依赖这部分内容. 这时候,可以使用mock模块来模拟调用这部分内容,并给出返回结果,举例如 ...