Caricamento differito delle immagini su gr

[L33T]

Al caricamento di un thread tutte le immagini comprese nei post e nelle firme vengono caricate. Non sarebbe più logico caricare solo quelle visibili e le altre a mano a mano che si rende necessario?

Questo script modifica il rendering delle pagine del forum per ottenere tale effetto.

// ==UserScript==
// @name          LazyLoad
// @namespace     http://www.klime.it
// @description   Carica le immagini soltanto quando diventano visibili
// @include       http://forum.gamesradar.it/*
// ==/UserScript==
/**
 * Ottiene una lista delle immagini presenti nei post e nelle firme
 */
var getImages = function(){
	// la seconda parte dell'xpath � un po' troppo hackish: da rivedere
	var iterator = document.evaluate('//div[@class="signature"]//img | //div[@class="signature"]/preceding-sibling::div//img', document, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null );
	var thisNode = iterator.iterateNext();
	var imgs = new Array();
	while (thisNode){
		imgs.push(thisNode);
		thisNode = iterator.iterateNext();
	}
	return imgs;
}
/**
 * Nasconde le immagini
 */
var prepareImages = function(imgs){
	for (var i=0;i<imgs.length;i++){
		imgs[i].setAttribute('original',imgs[i].src);
		imgs[i].src = '';
		imgs[i].loaded = true;
	}
}
/**
 * Carica e mostra le immagini visibili al momento della chiamata
 */
window.lazyLoad = function(){
	var getY = function(element){
		var curtop = 0;
		if (element.offsetParent){
			curtop = element.offsetTop
			while (element = element.offsetParent){
				curtop += element.offsetTop
			}
		}
		return curtop;
	}
	var windowHeight = window.screen.availHeight;
	var windowScroll = window.scrollY;
	var elementY;
	var imgElement;
	for (var i=0;i<window.lazyImages.length;i++){
		imgElement = window.lazyImages[i];
		elementY = getY(imgElement);
		var isVisible = false;
		if (elementY > windowScroll && elementY < windowScroll+windowHeight && imgElement.loaded == true){
			imgElement.src = imgElement.getAttribute('original');
			imgElement.setAttribute('original','');
			imgElement.loaded = false;
		}
	}
}
// prepare le immagini
prepareImages(window.lazyImages = getImages());
// mostra quelle visibili al momento..
window.lazyLoad();
// .. e assegna la funzione lazyload all'evento scroll, in modo che le immagini vengano caricate appena diventano visibili
window.addEventListener('scroll',window.lazyLoad,false);

Se avete Firefox 2 scaricate greasemonkey (https://addons.mozilla.org/it/firefox/addon/748) e andate su www.klime.it/public/lazyload.user.js per installarlo. Vi assicuro che il computer non esploderà °-°

Critiche e suggerimenti sono ovviamente graditi.

[miniBill '90]

greasemonkey
EDIT:l'ho provato, ti aNo

[Finalfire]

Al caricamento di un thread tutte le immagini comprese nei post e nelle firme vengono caricate. Non sarebbe più logico caricare solo quelle visibili e le altre a mano a mano che si rende necessario?

Questo script modifica il rendering delle pagine del forum per ottenere tale effetto.

// ==UserScript==
// @name          LazyLoad
// @namespace     http://www.klime.it
// @description   Carica le immagini soltanto quando diventano visibili
// @include       http://forum.gamesradar.it/*
// ==/UserScript==
/**
 * Ottiene una lista delle immagini presenti nei post e nelle firme
 */
var getImages = function(){
	// la seconda parte dell'xpath � un po' troppo hackish: da rivedere
	var iterator = document.evaluate('//div[@class="signature"]//img | //div[@class="signature"]/preceding-sibling::div//img', document, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null );
	var thisNode = iterator.iterateNext();
	var imgs = new Array();
	while (thisNode){
		imgs.push(thisNode);
		thisNode = iterator.iterateNext();
	}
	return imgs;
}
/**
 * Nasconde le immagini
 */
var prepareImages = function(imgs){
	for (var i=0;i<imgs.length;i++){
		imgs[i].setAttribute('original',imgs[i].src);
		imgs[i].src = '';
		imgs[i].loaded = true;
	}
}
/**
 * Carica e mostra le immagini visibili al momento della chiamata
 */
window.lazyLoad = function(){
	var getY = function(element){
		var curtop = 0;
		if (element.offsetParent){
			curtop = element.offsetTop
			while (element = element.offsetParent){
				curtop += element.offsetTop
			}
		}
		return curtop;
	}
	var windowHeight = window.screen.availHeight;
	var windowScroll = window.scrollY;
	var elementY;
	var imgElement;
	for (var i=0;i<window.lazyImages.length;i++){
		imgElement = window.lazyImages[i];
		elementY = getY(imgElement);
		var isVisible = false;
		if (elementY > windowScroll && elementY < windowScroll+windowHeight && imgElement.loaded == true){
			imgElement.src = imgElement.getAttribute('original');
			imgElement.setAttribute('original','');
			imgElement.loaded = false;
		}
	}
}
// prepare le immagini
prepareImages(window.lazyImages = getImages());
// mostra quelle visibili al momento..
window.lazyLoad();
// .. e assegna la funzione lazyload all'evento scroll, in modo che le immagini vengano caricate appena diventano visibili
window.addEventListener('scroll',window.lazyLoad,false);

Se avete Firefox 2 scaricate greasemonkey (https://addons.mozilla.org/it/firefox/addon/748) e andate su www.klime.it/public/lazyload.user.js per installarlo. Vi assicuro che il computer non esploderà °-°

Critiche e suggerimenti sono ovviamente graditi.

Veramente ben strutturato e, comunque, molto utile. Gran bello script

[QuasarLex]

Gran bello script, ci ho messo 5 minuti per capire a cosa serviva

Cmq io ho il 56k, è meglio che le carica prima che scrolli le img

[L33T]

Ci vuole un po' a caricare le immagini al volo, ma almeno ti risparmi una decina di secondi di caricamento all'inizio. Considerando che capita abbastanza spesso di aprire un thread e poi chiuderlo senza leggerlo tutto lo script è vantaggioso