js学习之原生js实现懒加载
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
img{
width: 500px;
height: 500px;
display: block;
}
</style>
</head>
<body>
<div class = "box">
<img asrc = "img/2.jpg" src="" alt="img1"/>
<img asrc = "img/2.jpg" src="" alt="img1"/>
<img asrc = "img/2.jpg" src="" alt="img1"/>
<img asrc = "img/2.jpg" src="" alt="img1"/>
<img asrc = "img/2.jpg" src="" alt="img1"/>
<img asrc = "img/2.jpg" src="" alt="img1"/>
<img asrc = "img/2.jpg" src="" alt="img1"/>
<img asrc = "img/2.jpg" src="" alt="img1"/>
<img asrc = "img/2.jpg" src="" alt="img1"/>
<img asrc = "img/2.jpg" src="" alt="img1"/>
<img asrc = "img/2.jpg" src="" alt="img1"/>
<img asrc = "img/2.jpg" src="" alt="img1"/>
<img asrc = "img/2.jpg" src="" alt="img1"/>
<img asrc = "img/2.jpg" src="" alt="img1"/>
<img asrc = "img/2.jpg" src="" alt="img1"/>
<img asrc = "img/2.jpg" src="" alt="img1"/>
<img asrc = "img/2.jpg" src="" alt="img1"/>
<img asrc = "img/2.jpg" src="" alt="img1"/>
<img asrc = "img/2.jpg" src="" alt="img1"/>
<img asrc = "img/2.jpg" src="" alt="img1"/>
<img asrc = "img/2.jpg" src="" alt="img1"/>
</div>
</body>
<script type="text/javascript">
(function(){
function tagName(tagName){
return document.getElementsByTagName(tagName);
}function addEvent(obj,type,func){
if(obj.addEventListener){
obj.addEventListener(type,func,false);
}else if(obj.attachEvent){
obj.attachEvent('on'+type,func);
}
}
var v = {
eleGroup:null,
eleTop:null,
eleHeight:null,
screenHeight:null,
limitHeight:null
}
function init(element){
v.eleGroup = document.getElementsByTagName(element);
v.screenHeight = document.documentElement.clientHeight;
var len = v.eleGroup.length;
for(var i = 0;i < len; i++){
if(v.eleGroup[i].offsetTop<v.screenHeight&&v.eleGroup[i].getAttribute("asrc")){
v.eleGroup[i].setAttribute("src",v.eleGroup[i].getAttribute("asrc"));
v.eleGroup[i].removeAttribute("asrc");
}
}
}
function lazyload(){
v.limitHeight = document.documentElement.scrollTop || document.body.scrollTop + document.documentElement.clientHeight;
var len = v.eleGroup.length;
for(var j = 0 ;j < len; j++){
if(v.eleGroup[j].offsetTop <= v.limitHeight&&v.eleGroup[j].getAttribute("asrc")){
v.eleGroup[j].setAttribute("src",v.eleGroup[j].getAttribute("asrc"));
v.eleGroup[j].removeAttribute("asrc");
}
}
}
init("img");
addEvent(window,"scroll",lazyload);
})()
</script>
</html>
我们知道了浏览器加载img是很耗费资源的，还有带宽，而且还有一个特点就是如果没有设置img的src属性，就不会消耗这些资源，所以我们用到的加载的方法就是首先将所有img的src置空，然后自定义一个asrc属性，这里放的是实际的src，当我们需要加载这张图片时就可以获取img的这个属性，并将其值赋值给src，实现图片的加载。
思路：首先在当前可视化的区域加载图片,首先需要获取浏览器的高度，然后查询每个元素相对浏览器顶部距离，然后加载满足：相对浏览器顶部的距离小于浏览器高度的图片，实现对可视化区域的初始化填充。
真正实现懒加载的原理是：获取当前元素距离浏览器顶部的高度，与浏览器+scroll卷到上面的高度相比较，如果前者小于后者就代表轮到这张图片显示了！就把它加载出来。
ps：需要注意的地方
addEventListener VS attachEvent
前者兼容主流浏览器，后者兼容ie（ie6及更高级版本兼容，低于ie6未测试）
document.documentElement VS document.body
ie默认的box-sizing为border-box不会将html识别为盒模型，所以用document.documentElement就获取不到clientHeight scrollHeight等值。所以使用
document.documentElement.scrollTop || document.body.scrollTop
可以解决兼容性问题
js学习之原生js实现懒加载的更多相关文章
- 001_Chrome 76支持原生HTML 图片懒加载Lazy loading
Table Of Content 什么是懒加载? 语法参数及使用方式? 有哪些特点? 与js有关的实践 什么是懒加载? 技术背景 Web应用需要经常向后台服务器请求资源(通过查询数据库,是非常耗时耗资 ...
- Spring5.0源码学习系列之浅谈懒加载机制原理
前言介绍 附录:Spring源码学习专栏 在上一章的学习中,我们对Bean的创建有了一个粗略的了解,接着本文挑一个比较重要的知识点Bean的懒加载进行学习 1.什么是懒加载? 懒加载(Lazy-ini ...
- 原生 JS 实现最简单的图片懒加载
懒加载 什么是懒加载 懒加载其实就是延迟加载,是一种对网页性能优化的方式,比如当访问一个页面的时候,优先显示可视区域的图片而不一次性加载所有图片,当需要显示的时候再发送图片请求,避免打开网页时加载过多 ...
- Vue-Router学习第二弹动态路由\懒加载\嵌套路由
在我们做项目时肯定会有出现动态路由: 举个栗子: 一个品种的商品页面会有同类不同样的商品就要在路由的后面加一个id: Vue的路由id是这样添加的: 两种动态路由 一种是params参数添加: 首先现 ...
- 原生javascript代码懒加载
1.先定义需要懒加载的样式: class="lazyload" 2.设置初始透明度为0.1: .lazyload{ filter: Alpha(opacity=10); -moz- ...
- 【转】ViewPager学习笔记（一）——懒加载
在项目中ViewPager和Fragment接口框架已经是处处可见,但是在使用中,我们肯定不希望用户在当前页面时就在前后页面的数据,加入数据量很大,而用户又不愿意左右滑动浏览,那么这时候ViewPag ...
- [转]ViewPager学习笔记（一）——懒加载
在项目中ViewPager和Fragment接口框架已经是处处可见,但是在使用中,我们肯定不希望用户在当前页面时就在前后页面的数据,加入数据量很大,而用户又不愿意左右滑动浏览,那么这时候ViewPag ...
- Swift 学习一函数&函数属性&懒加载
函数 函数相当于OC中的方法 格式: func 函数名(参数列表) -> 返回值类型 { 代码块 return 返回值} func 函数名(参数列表){ // 返回值为Void 可 ...
- Chrome 75 将原生支持图片懒加载
4 月 6 日,Google 的 Chrome & Web 平台工程经理 Addy Osmani 在个人博客发文,介绍到 <img> 和 <iframe> 的 load ...
随机推荐
- 整理Xen理论知识
XEN 简介 XEN 是一个基于X86架构.发展最快.性能最稳定.占用资源最少的开源虚拟化技术.Xen可以在一套物理硬件上安全的执行多个虚拟机,与 Linux 是一个完美的开源组合,Novell SU ...
- 微信小程序-滚动Tab选项卡
前言:今天呢 给大家详细讲解一下滚动Tab选项卡:左右可滑动切换的效果,希望对大家做项目时候有用! 以前也遇到过这个,但是没有做记录.转载来源于:https://www.jianshu.com/p/9 ...
- JavaScript数组方法--every、some、fill
接上一篇,JavaScript数组方法--concat.push,继续其他的数组方法. every:every() 方法测试数组的所有元素是否都通过了指定函数的测试. 先看其使用方法: functio ...
- 强一致性hash实现java版本及强一致性hash原理
一致性 hash 分布式过程中我们将服务分散到若干的节点上,以此通过集体的力量提升服务的目的.然而,对于一个客户端来说,该由哪个节点服务呢?或者说对某个节点来说他分配到哪些任务呢? 强哈希 考虑到单服 ...
- MySQL实现分组取组内特定数据的功能
需求:在MySQL5.7环境下,查询下面表中,各个学科前两名的学生的成绩: 1.准备数据 窗机表以及向表中插入数据 创建一张表: DROP TABLE IF EXISTS `grade`; CREAT ...
- Ubuntu离线安装docker
1.先安装依赖libltdl7_2.4.6-0.1_amd64.deb 下载链接http://archive.ubuntu.com/ubuntu/pool/main/libt/libtool/libl ...
- k8s网络
一.同一宿主机的两个容器间通信 通过 Veth Pair 设备 + 宿主机网桥的方式,实现了跟同一宿主机上其他容器通信. 访问流程:当容器1想要跟容器2通信时,IP包会被转发到容器1的eth0这个网卡 ...
- Disconnected from the target VM, address: '127.0.0.1:57178', transport: 'socket'
idea 执行测试单元debug时控制台出现:Disconnected from the target VM, address: '127.0.0.1:57178', transport: 'sock ...
- PHP原生写的生成图片缩略图类
PHP原生写的生成图片缩略图类,本文以京东商品图片为例,分别生成三种不同尺寸的图片.调用方法很简单只要传参数高度和宽度,及新图片的名称. 引入缩略图类 include_once 'ImageResiz ...
- java面试题复习（二）
//我又回来了 11.数组有没有length()方法?String有没有length()方法? 数组只有length属性,String有length()方法.注意:JavaScript获取字符串长度使 ...