Greasy Fork is available in English.

Lasy_load_img_Library

2.0

Dette script bør ikke installeres direkte. Det er et bibliotek, som andre scripts kan inkludere med metadirektivet // @require https://update.greasyfork.org/scripts/488188/1335058/Lasy_load_img_Library.js 

// ==UserScript==
// @name         Lasy_load_img_Library
// @namespace    http://tampermonkey.net/
// @version      2024.2.28
// @description  修复bug
// @author       You
// @grant        none
// @include      *
// ==/UserScript==

let img = null
let lock = false
let loadnum = 10

function set_img(tag){
	
	if(!tag || tag.length==1){return}
	if(tag.first()[0] instanceof HTMLImageElement){img = tag}else{img = tag.find('img')}
	
	hide_img(img)
	
	img.on('touchstart',img_touchstart)
	// img.on('touchmove',img_touchmove)
	// img.on('touchend',img_touchend)
	
	loadimg(loadnum)
}

function hide_img(iimg){
	console.log('hide')
	console.log(iimg)
	iimg.each(function(){
		if($(this).attr('native_src') || !this.src){return}
		$(this).attr('native_src',this.src)
		$(this).attr('src','no')
		$(this).css({
			'background-color':'#535353',
		})
		if($(this).width()==0){$(this).css('width','100%')}
		if($(this).height()==0){$(this).css('height','80vh')}
	})
}

let scroll_state = "down"
function CheckScroll_up_or_down(){
	let scrollend = null
	let sy = window.scrollY
	//console.log(box)
	document.addEventListener('scroll',function(){
		//console.log('scroll')
		if(scrollend){clearTimeout(scrollend)}
		scrollend = setTimeout(function() {
			if($('[touch]').length==0){return null}
			//console.log(sy+":"+$('.box').scrollTop())
			if(Math.abs($('[touch]')[0].getBoundingClientRect().top)<$(window).height()/2){
				console.log('return touch')
				//return $('[touch]')
			}
			console.log(sy + ":" + window.scrollY)
			if(sy<window.scrollY){
				console.log('down')
				scroll_state = 'down'
				//return null
			}else{
				//向上滚动
				console.log('up')
				scroll_state = 'up'
				//return null
			}
			sy = window.scrollY
		}, 500);
	})
}

function img_touchstart(){
	
	showimg($(this))
	if(this.naturalHeight==0){
		let myself = this
		let img = new Image
		img.onload=function(){
			let newimg = $(myself).clone(true)
			$(myself).after(newimg)
			$(myself).remove()
		}
		img.src=this.src
	}
	$('[touch]').removeAttr('touch')
	$(this).attr('touch','yes')
}
function showimg(iimg){
	
	console.log(iimg)
	console.log(iimg.index() + " : " + img.index(iimg))
	var pre = img.slice(Math.max(0,img.index(iimg)-3),img.index(iimg))
	console.log(pre)
	var nex = img.slice(img.index(iimg),Math.min(img.length,img.index(iimg)+3))
	console.log(nex)
	var all = null
	if(pre.length==0){all = nex}
	if(nex.length==0){all = pre}
	if(!all){all = pre.add(iimg).add(nex)}
	
	all.each(function(){
		if(lock){return false}
		if(!$(this).attr('native_src')){return true}
		if(this.src == $(this).attr('native_src')){return true}
		
		loadimg(loadnum)
		return false
	})
}
function loadimg(nums){
	
	let now = img.index($('[touch]:first'))
	if($('[touch]:first').length==0){now = 0}
	console.log(now)

	let needload = null
	if(scroll_state=="down"){
		needload = img.slice(now,Math.min(now+nums,img.length))
	}else{
		needload = img.slice(Math.max(now-nums,0),now+1).get().reverse()
		needload = $(needload)
	}
	console.log(needload)
	needload.each(function(){
		let native_src = $(this).attr('native_src')
		if(native_src && native_src!=this.src){
			$(this).attr('src',native_src).show()
		}
	})
}
function setLoadNum(num){
	loadnum = num
}
window.LasyLoad = {
	CheckScroll_up_or_down : CheckScroll_up_or_down, //这个必须先调用一次，且只能调用一次
	set_img : set_img,  //设置须要懒加载的图片
	setLoadNum : setLoadNum,  //设置每次加载的数量，默认是10
}