前端开发笔记

3 篇文章 0 订阅

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

//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;//显示在最上层

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值