Lasy_load_img_Library

原版

Stan na 24-02-2024. Zobacz najnowsza wersja.

Ten skrypt nie powinien być instalowany bezpośrednio. Jest to biblioteka dla innych skyptów do włączenia dyrektywą meta // @require https://update.greatest.deepsurf.us/scripts/488188/1332826/Lasy_load_img_Library.js

Aby zainstalować ten skrypt, wymagana jest instalacje jednego z następujących rozszerzeń: Tampermonkey, Greasemonkey lub Violentmonkey.

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

Aby zainstalować ten skrypt, wymagana jest instalacje jednego z następujących rozszerzeń: Tampermonkey, Violentmonkey.

Aby zainstalować ten skrypt, wymagana będzie instalacja rozszerzenia Tampermonkey lub Userscripts.

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

Aby zainstalować ten skrypt, musisz zainstalować rozszerzenie menedżera skryptów użytkownika.

(Mam już menedżera skryptów użytkownika, pozwól mi to zainstalować!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

Będziesz musiał zainstalować rozszerzenie menedżera stylów użytkownika, aby zainstalować ten styl.

Będziesz musiał zainstalować rozszerzenie menedżera stylów użytkownika, aby zainstalować ten styl.

Musisz zainstalować rozszerzenie menedżera stylów użytkownika, aby zainstalować ten styl.

(Mam już menedżera stylów użytkownika, pozwól mi to zainstalować!)

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