03JavaScript动画DOM——滚动偏移、瀑布流、Image对象、图片预加载、懒加载、获取计算后样式

本文链接：https://blog.csdn.net/weixin_39672936/article/details/82502706

浏览器页面获取滚动偏移

兼容写法：注意顺序不能乱

var scroll=document.body.scrollTop||window.pageYOffset||document.documentElement.scrollTop

测试各个浏览器滚动偏移属性

window.onscroll=function(){
	// 对各个浏览器获取页面滚动偏移的兼容测试
	console.log(document.body.scrollTop,
	document.documentElement.scrollTop,
	window.pageYOffset);
}

1、document.body.scrollTop,2、document.documentElement.scrollTop, 3、window.pageYOffset);

当页面有DOCTYPE声明时兼容性为：1，2，3分别表示获取方法

chrome:2,3 FF:2,3 safari:1,3 Opera:2,3 IE:2,3----IE8及以下不支持3

当页面无DOCTYPE声明时兼容性为：

chrome:1,3 FF:1,3 safari:1,3 Opera:1,3 IE:1,3----IE8及以下不支持3

注意点：

1、在IE下window.pageYOffset,不支持的时候并不返回0而是返回undefined

2、pageYOffset是window的属性，只能用于获取页面的滚动偏移，具体元素没有这个属性

3、当数值参与或逻辑运算时：非0即为真，当表达式为true时会得到第一个为true的数值，当表达式为false时会得到最后一个为false的数值

var n=0||0||undefined;//3||1||2
console.log(n)//n=undefined

获取浏览器窗口可视区域的宽高无兼容性问题

document.documentElement.clientWidth/clientHeight

获取页面实际宽高度

document.documentElement.scrollWidth/scrollHeight

页面实际高度-窗口可视高度=最大页面滚动偏移
window.scrollY/window.scrollX(获取水平/竖直偏移)IE不支持

注意：滚动偏移scrollTop本身是一个读写属性，可以获取值，也可以设置值，可以将页面的滚动距离直接设置，但是不要直接在页面初次加载的时候设置，不起作用，需要页面加载完后一个触发机制

常见案例：页面返回顶部

1、实时检测页面是否发生滚动偏移，获取滚动偏移量进行判断

2、当发生偏移时，显示返回顶部按钮

3、为返回顶部按钮绑定onClick事件，事件触发时，设置滚动偏移为0，可以添加动画让过程变化缓慢些

原生JS瀑布流:

原理：根据瀑布流列数，设置布局，下面以3列瀑布流为例，根据每列的最小高度来确定添加位置

核心代码：

// var boxs=document.querySelectorAll(".box");//静态获取
var boxs2=document.getElementsByClassName("box")//动态获取

//将高度最矮的下标返回函数
	function minIndex(){
		var boxs=document.getElementsByClassName("box");
		// 记录高度数组
		var heightArr=[];
		for(var i=0;i<boxs.length;i++){
			heightArr.push(boxs[i].clientHeight)
		}
		var minNum=heightArr[0]
		for(var i=0;i<heightArr.length;i++){
			if(minNum>heightArr[i]){
				minNum=heightArr[i];
			}
		}
		return heightArr.indexOf(minNum)
	}

无限添加瀑布流，通过判断来实现：当瀑布流中高度最小一列内容即将完全显示在页面上时，我们就需要创建并添加新的元素，即：页面滚动偏移量+窗口可视宽度 >=瀑布流中最小高度

返回最低的函数
	function minIndex(){
		var heightArr=[];
		for(var i=0;i<boxs.length;i++){
			heightArr.push(boxs[i].clientHeight)
		}
		// 假设最小高度是第一列的高度
		var minHeight=heightArr[0];
		for(var i=0;i<heightArr.length;i++){
			// 如果有高度小于假设的，就用小得替换假设的
			if(minHeight>heightArr[i]){
				minHeight=heightArr[i];
			}
		}

		// 将数组中最小值的下标与最小值进行返回，返回数组，第一个元素是下标，第二个是值
		return [heightArr.indexOf(minHeight),minHeight]
	}

Image对象

img标签的创建方式

1、创建img标签：var img1=document.createElement("img");
document.body.appendChild(img1);

2、构造函数创建img对象：var img2=new Image();
document.body.appendChild(img2);

属性：

alt：表示图片加载失败时显示的内容 title：鼠标悬停时出现，图片的说明 width/height：img对象属性，可设置或获取图片的宽高，值是一个number无单位 src：加载图片资源的路径，注意src何时加载和是否将元素加载到页面无关，只要创建了img，并未src赋值，就会立刻加载资源，在图片加载完成前无法获取图片原本的宽高

Image对象事件：onerror 图片在加载过程中发生错误调用时触发的事件 onload事件，图片加载完成时调用的事件，可以用来设置loading，防止图片加载事件过长而带来的用户体验降低

图片预加载

在用户浏览网页之前，预先对图片的资源进行加载，加载完成后再为用户呈现，提高页面浏览的流畅性，增强用户体验

预加载可以说是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。实现预载的方法非常多，可以用CSS(background)、JS(Image)、HTML(<img />)都可以。常用的是new Image();，设置其src来实现预载，再使用onload方法回调预载完成事件。只要浏览器把图片下载到本地，同样的src就会使用缓存，这是最基本也是最实用的预载方法。当Image下载完图片头后，会得到宽和高，因此可以在预载前得到图片的大小(方法是用记时器轮循宽高变化)。

var sourArr=["Imgs/1.png","Imgs/2.png","Imgs/3.png","Imgs/4.png","Imgs/5.png"];
	
	var count=0;//记录已经加载的图片数量
	var imgs=[];//用来存放创建的img
	for(var i=0;i<sourArr.length;i++){
		var img=new Image();
		imgs.push(img);
		img.src=sourArr[i];
		img.onload=function(){
			// 一旦触发事件，说明图片已经加载完成
			count++;
			var n=count/sourArr.length*100+"%";
			loadState.innerHTML="加载进度:"+n;
			// 当加载完成的数量与要加载的数量一致的时候，就意味着全部加载完成
			if(count==sourArr.length){
				loadText.innerHTML="加载完成，请欣赏！"
				for(var i=0;i<imgs.length;i++){
					// 加载完成后显示图片
					document.body.appendChild(imgs[i]);
				}
			}
		}
	}

图片懒加载

又称为图片延迟加载，在需要的时候在进行资源加载，减少页面初次加载时间，提升用户提体验

懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。

实现方式：

1.第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟.

2.第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。

3.第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。

window.onscroll=function(){
		// 获取页面滚动偏移量
		var scroll=document.body.scrollTop||window.pageYOffset||document.documentElement.scrollTop;
		// 获取页面当前浏览器可是窗口高度
		var ch=document.documentElement.clientHeight;
		// 当图片将要显示在页面时在进行资源加载
		if(scroll+ch>=2000-100){
			// 将自定义存储的路径赋值给src
			// img.src=img.mysrc自定义属性的值不能通过“.”语法获取
			img.src=img.getAttribute("mysrc")
		}
	}

预加载与懒加载的比较：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

获取计算后的样式

getComputedStyle()与style的区别:

参数obj为要获取的元素对象

name要获取的css属性名称

兼容写法,得到的为字符串

复合属性使用驼峰标识// backgroundColor

function getStyle(obj,name){
 	if(obj.currentStyle){
 		return obj.currentStyle[name];//IE下的兼容
 	}else{
 		return getComputedStyle(obj)[name];//其他兼容
 	}
 }