Lasy_load_img_Library

原版

Versione datata 24/02/2024. Vedi la nuova versione l'ultima versione.

Questo script non dovrebbe essere installato direttamente. È una libreria per altri script da includere con la chiave // @require https://update.greatest.deepsurf.us/scripts/488188/1332826/Lasy_load_img_Library.js

Dovrai installare un'estensione come Tampermonkey, Greasemonkey o Violentmonkey per installare questo script.

You will need to install an extension such as Tampermonkey to install this script.

Dovrai installare un'estensione come Tampermonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Userscripts per installare questo script.

Dovrai installare un'estensione come ad esempio Tampermonkey per installare questo script.

Dovrai installare un gestore di script utente per installare questo script.

(Ho già un gestore di script utente, lasciamelo installare!)

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

(Ho già un gestore di stile utente, lasciamelo installare!)

// ==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
}