Lasy_load_img_Library

原版

Version au 24/02/2024. Voir la dernière version.

Ce script ne doit pas être installé directement. C'est une librairie destinée à être incluse dans d'autres scripts avec la méta-directive // @require https://update.greatest.deepsurf.us/scripts/488188/1332826/Lasy_load_img_Library.js

Poser une question, écrire un avis, ou signaler le script.

Enveloppe les lignes

// ==UserScript==
// @name         Lasy_load_img_Library
// @namespace    http://tampermonkey.net/
// @version      2024.2.24
// @description  原版
// @author       You
// @grant        none
// ==/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){
	
	iimg.each(function(){
		if($(this).attr('native_src') || !$(this).attr('src')){return}
		$(this).attr('native_src',src)
		$(this).attr('src','no')
		$(this).css({
			'background-color':'#535353',
			width:'100%',
			height:'80vh',
		})
	})
}

let scroll_state = "down"
function CheckScroll_up_or_down(){
	
	let scrollend = null
	let sy = $('.box').scrollTop()
	$('.box').scroll(function(){
		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]')
			}
			if(sy<$('.box').scrollTop()){
				console.log('down')
				scroll_state = 'down'
				//return null
			}else{
				//向上滚动
				console.log('up')
				scroll_state = 'up'
				//return null
			}
		}, 500);
	})
}

function img_touchstart(){
	
	showimg($(this))
	if(this.naturalHeight==0){
		let myself = this
		let img = new Image
		img.onload=function(){
			$(myself).after(img)
			$(myself).remove()
		}
		img.src=this.src
	}
	$('[touch]').removeAttr('touch')
	$(this).attr('touch','yes')
}
function showimg(iimg){
	
	console.log(iimg)
	var pre = img.slice(Math.max(0,iimg.index()-3),iimg.index())
	console.log(pre)
	var nex = img.slice(iimg.index(),Math.min(img.length,iimg.index()+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(now==-1){now = 0}
	
	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)
	}
	
	needload.each(function(){
		let native_src = $(this).attr('native_src')
		if(native_src && native_src!=this.src){
			$(this).attr('src',native_src)
		}
	})
}
function setLoadNum(num){
	loadnum = num
}
window.LasyLoad = {
	CheckScroll_up_or_down : CheckScroll_up_or_down, //这个必须先调用一次，且只能调用一次
	set_img : set_img,  //设置须要懒加载的图片
	setLoadNum : setLoadNum,  //设置每次加载的数量，默认是10
}