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应用需要经常向后台服务器请求资源(通过查询数据库,是非常耗时耗资 ... 
随机推荐
- Spring整合Shiro并扩展使用EL表达式
			Shiro是一个轻量级的权限控制框架,应用非常广泛.本文的重点是介绍Spring整合Shiro,并通过扩展使用Spring的EL表达式,使@RequiresRoles等支持动态的参数.对Shiro的介 ... 
- javaweb 关于页面获取数据
			EL(Excepress Language表达式语言) 1.....所有的EL都是以$"{"开始,以"}"结尾的.例:${sessionScope.user.s ... 
- Angular4---部署---将Angular项目部署到IIS上
			---恢复内容开始--- Angular项目部署到一个IIS服务器上 1.安装URL rewrite组件: 网址:https://www.microsoft.com/en-us/download/de ... 
- 14.C++-二阶构造模式、友元(详解)
			首先回顾以前所学的构造函数 类的构造函数用于对象的初始化 构造函数与类同名并且没有返回值 构造函数在定义时被自动调用 由于构造函数没有返回值不能判断执行结果,所以不能保证初始化对象能否成功 比如: c ... 
- oracle 10g数据库下的 XDB组件的重新安装
			emmmm,这是一个不做死就不会的过程!!! 今天在导出数据库时,遇到了报错信息,其实开发说这个报错没关系了,但作死如楼主,一定要把这个错给解决了,然后就有了下面的作死过程. 错误关键字是:packa ... 
- dhcp 的安装和配置文件
			install: yum - y install dhcp modify : vim /etc/dhcp/dhcpd.conf ddns-update-style none;ignore cli ... 
- IPFS: BitSwap协议(数据块交换)
			原创 2018-01-11 飞向未来 IPFS指南 BitSwap协议 IPFS节点之间是如何进行数据交换的?本文来讲一下这个问题. IPFS在BitTorrent的基础上实现了p2p数据交换协议:B ... 
- DB2开发系列之一——基本语法
			最近看了些db2开发方面的资料,现做摘要,以供自己和大家参考: 1.变量声明 DECLARE v_salary DEC(9,2) DEFAULT 0.0; DECLARE v_status char( ... 
- Oracle/Hive/Impala SQL比较1
			5 Function 指数据库内置的function,不讨论UDF.另外,操作符都不比较了,区别不大. 5.1 数学函数 功能 Oracle Hive Impala ABS 绝对值,有 ... 
- Redis sentinel & cluster 原理分析
			1. Redis集群实现分析 1.1 sentinel 1. 功能 Sentinel实现如下功能: (1)monitoring--redis实例是否正常运行. (2)notification-- ... 
