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应用需要经常向后台服务器请求资源(通过查询数据库,是非常耗时耗资 ...
随机推荐
- 团体程序设计天梯赛 L1-034.点赞
描述 微博上有个"点赞"功能,你可以为你喜欢的博文点个赞表示支持.每篇博文都有一些刻画其特性的标签,而你点赞的博文的类型,也间接刻画了你的特性.本题就要求你写个程序,通过统计一个人 ...
- asp.net core 发布centos 7 遇到的坑
只是简单记录 .net core 在linux 的安装部署步骤,大神可以忽略 虚拟机:VMware Workstation Pro Linux 版本:http://mirrors.aliyun.com ...
- linux的shell学习笔记
shell脚本第一行写明解释器的路径: #!/bin/bash运行脚本两种方式:使用bash命令运行shell文件,或授予脚本文件执行权限,可直接执行文件shell启动时,一开始执行一组命令来定义提问 ...
- NYOJ街区最短路径问题
描述 一个街区有很多住户,街区的街道只能为东西.南北两种方向. 住户只可以沿着街道行走. 各个街道之间的间隔相等. 用(x,y)来表示住户坐在的街区. 例如(4,20),表示用户在东西方向第4个街道, ...
- 原生js移动端滑动事件
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
- jQuery中有关mouse的事件--mousedown/up/enter/leave/over/out----2017-05-10
mousedown:鼠标按下才发生 mouseup:鼠标按下松开时才发生 mouseenter和mouseleave效果和mouseover mouseout效果差不多:但存在区别,区别见代码解析: ...
- postgresql数据操作
windows下操作postgresql 删除数据库:dropdb.exe -U postgres 数据库名称 创建数据库createdb.exe -U postgres lilei_db1--lil ...
- centos7的服务管理
1,启动服务(每条都可以)systemctl start httpdsystemctl start httpd.serviceservice httpd start 2,停止服务systemctl s ...
- 常用的Maven依赖
一.数据库类型 1.mysql驱动 <!-- mysql驱动支持 --> <dependency> <groupId>mysql</groupId> & ...
- Python十题(第2课)
一.天天向上的力量 C 一年365天,以第1天的能力值为基数,记为1.0.当好好学习时,能力值相比前一天提高N‰:当没有学习时,由于遗忘等原因能力值相比前一天下降N‰.每天努力或放任,一年下来的能力值 ...