前端开发笔记

一、浏览器的懒加载
方法一：

//onload可不用，把onload下的内容直接放到生命周期中（useEffect中）
		window.onload = () => {
			var eles = document.querySelectorAll('.img-list li img'); // 获取所有列表元素
			
			// 监听回调
			var callback = (entries) => {
				entries.forEach(item => {
					// 出现到可视区
					if (item.intersectionRatio > 0) {
						var ele = item.target;
						var imgSrc = ele.getAttribute('data-src');
						if (imgSrc) {
							// 预加载
							var img = new Image();
							img.addEventListener('load', function() {
							    ele.src = imgSrc;
							}, false);
							ele.src = imgSrc;
							// 加载过清空路径，避免重复加载
							ele.removeAttribute('data-src');
						}
					}
				})
			}
			var observer = new IntersectionObserver(callback);

			// 列表元素加入监听
			eles.forEach(item => {
				observer.observe(item);
			})
		}

二、多行文本溢出显示。。。（支持webkit内核）
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
overflow: hidden;
三、英文强制可换行：word-break: break-all;
四、元素固定在顶部，且仍然占位：
position: sticky;
top: 0;//位置
z-index: 999;//显示在最上层