b站 图片懒加载 禁用

div.r-info.clearfix

div.cover-contain

a.preview

div.lazy-img

 

没加载的是这样：<div class="lazy-img"> <img alt=""> </div>

加载了的是：<div class="lazy-img"> <img alt="" src="//i1.hdslb.com/bfs/archive/a83d24d79a1768dd05e2cd72b8580609907e2ff2.jpg@160w_100h_1c.webp"> </div>

 

查看network-initiator

 

可以通过.__vue__获取到vue实例，然后得到src，然后赋值到html src属性上。不过我就不这么麻烦了，寻找一个更通用的办法

 

 

 

    t.checkInView = function(e, t) {
        if (e) {
            var n = e.getBoundingClientRect()
              , i = t || 0;
            return n.top < window.innerHeight + i && n.bottom >= 0
        }
    }

 

 

 

尝试了transform: scale(0.3); zoom: 0.3; 都不行

好像可以，就是滚动到底部检测不出来，需要先用鼠标中键滚动加载完

 

transform好像比较zoom灵敏点，不知道是什么奇怪原因

 

 

更：缩小界面手动滚动还是有点麻烦，还得肉眼判断哪个图片没有加载，由于 throttle节流的原因，图片固定时间只能加载固定数量。

简单写了段代码。

 

setInterval(() => {
	newFunction();
}, 500);

function newFunction() {
	// 获取所有选中的img元素
	const imgElements = document.querySelectorAll("#history_list img");

	// 遍历所有img元素
	// imgElements.forEach(img => {
	//     // 判断src是否为空
	//     if (img.src === '') {
	//         // 滚动到该元素位置
	//         img.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
	//     }
	// });
	for (const img of imgElements) {
		// console.log(el);
		// 判断src是否为空
		if (img.src === '') {
			// 滚动到该元素位置
			img.scrollIntoView({
				behavior: "smooth",
				block: "center",
				inline: "nearest"
			});
			break;
		}
	}
}