jQuery - brži load

Radio sam neku modifikaciju za klijenta na stranici,
http://www.jav2me.net/
, točnije ovaj slider.

Slider se loada u headu,

$(document).ready(function(){ 
	
		// Gallery
		if(jQuery("#gallery").length){

			// Declare variables
			var totalImages = jQuery("#gallery > li").length,
				imageWidth = jQuery("#gallery > li:first").outerWidth(true),
				totalWidth = imageWidth * totalImages,
				visibleImages = Math.round(jQuery("#gallery-wrap").width() / imageWidth),
				visibleWidth = visibleImages * imageWidth,
				stopPosition = (visibleWidth - totalWidth);

			jQuery("#gallery").width(totalWidth);

			jQuery("#gallery-prev").click(function(){
				if(jQuery("#gallery").position().left == 0 && !jQuery("#gallery").is(":animated")){
					jQuery("#gallery").animate({left : "+=" + stopPosition + "px"});
				}
				return false;
			});

			jQuery("#gallery-prev").click(function(){
				if(jQuery("#gallery").position().left < 0 && !jQuery("#gallery").is(":animated")){
					jQuery("#gallery").animate({left : "+=" + 6*imageWidth + "px"});
				}
				return false;
			});
		
			jQuery("#gallery-next").click(function(){
				if(jQuery("#gallery").position().left > stopPosition && !jQuery("#gallery").is(":animated")){
					jQuery("#gallery").animate({left : "-=" + 6*imageWidth + "px"});
				}
				return false;
			});
		
			jQuery("#gallery-next").click(function(){
				if(jQuery("#gallery").position().left = stopPosition && !jQuery("#gallery").is(":animated")){
					jQuery("#gallery").animate({left : "+=" + 12*imageWidth + "px"});
				}
				return false;
			});
		}

	});

Probajte loadati stranicu, i vidjeti ćete da se slider prvo loada u izvornom obliku, dakle itemi su jedan ispod drugoga, i tek na puni load stranice sve se složi kako treba.

Da li se to može kako ubrzati, ili da sakrijem slider dok se ne loada skroz ili neki treči način.

Pomagajte, hvala :slight_smile:

Sakrij slider u CSS-u (recimo display:hidden;), a zatim u JS-u izmijeniš CSS svojstvo tako da se slider prikaže.

Da, razmišljao sam o tome. Samo moram pogledati neku referencu za lijepši load pomoću jQuery-a, da nije baš da samo bane.

Koristi ovo
Vrlp jednostavna implementacija, ako treba pomoć, samo pitaj.

Pogledaj ovu stranicu, oni su tako riješili svoj slider.

[quote=“suludi”]Koristi ovo
Vrlp jednostavna implementacija, ako treba pomoć, samo pitaj.

Pogledaj ovu stranicu, oni su tako riješili svoj slider.[/quote]

Hvala puno, ovo super izgleda, javim rezultate.

Hmm imam problema s ovim.

Ovako sam ga ubacio:

<script>

$(document).ready(function(){ 
$("#gallery-wrap").queryLoader2();
});
</script>

Međutim on meni prvo loada prvo sve slike u #gallery-wrap div-u, onda se pojavi crta i makne.

Jel ja nešto krivo radim ili?

Probao sam isto napraviti i sa body umjesto div-om, isti rezultat. Da li je problem u tome što slike povlačim sa eksternih host-ova (imgur itd) ?

Ma uzmi neki loader gif, stavi ga umjesto galerije kad se galerija loadira do kraja stavi display:none na gif image a na galeriju stavi display:block.

Problem je u tome što ako stavim display: none na galeriju, kada ju revertam na display: block, ona nije posložena kako spada.

Prva stvar CSS ti je u komi, druga stvar prvo loadaj sve css fileove, pa onda javascript fileove, treća stvar ti imaš tu toliko toga što se loada da to čovjek ne može vjerovati. Početna stranica ti je bacila 154 requesta i loadala 2.2 MB. WTF???
Posatvi height koji će biti iddentičan visini slike na gallery-wrap element i onda ti se neće sve slike pokazati.

[quote=“CreatifCode”]Prva stvar CSS ti je u komi, druga stvar prvo loadaj sve css fileove, pa onda javascript fileove, treća stvar ti imaš tu toliko toga što se loada da to čovjek ne može vjerovati. Početna stranica ti je bacila 154 requesta i loadala 2.2 MB. WTF???
Posatvi height koji će biti iddentičan visini slike na gallery-wrap element i onda ti se neće sve slike pokazati.[/quote]

Ja se ne pačam u ostalo, moje je zaduženje samo da slider profunkcionira kako spada :slight_smile: Mislim da će ovaj height riješiti stvari, zahvala na hintu.

No frx.

Inače je dobro sve galerije/slidere i sl. staviti u DIV čije dimenzije su fiksne i odgovaraju dimenzijama galerije/slidera i tom DIVu dodjelit:

div 
{
overflow:hidden;
}

tako ako se recimo Jquery slider sa 5x(950x400px) galerijom ne “rastegne” na sekundu dve dok se jpg/png učitaju nego zadrži dimenzije (950x400px) i pri tome eventualno prikaže prvu sliku koja se učitala (jer je prva u tom DIVu)…

u ovom slučaju:

div 
{
width:950px;
height:400px;
overflow:hidden;
}

možda nije na otmet staviti i (ako nisu već uključeni u *{} na početku CSSa):

{
width:950px;
height:400px;
overflow:hidden;
margin:0;
padding:0;
position:relative;
}

da se izbjegne njesr@ u IEu i defaultnim (pret)postavkama… :stuck_out_tongue:

umjesto $(document).ready(function(){ stavi $(window).load(function(){

Ukoliko već nisi, napravi kako kolega iznad navodi “pre-load” jQuery-a, odnosno da se funkcija proradi odmah nakon što se stranica učita u potpunosti (fotografije, css, sadržaj…).

jQuery(document).ready(function(){
imeFunkcije();
});

function imeFunkcije()
{…}

Također, ukoliko imaš više “requests” zahtjeva za preuzimanjem .js datoteka, kopresiraj (spoji) u jedan dokumenat (jest da će ispast nekoliko stotina KB/ ili nekoliko MB-a).

  • koristi gzip/deflate u .htaccess datoteci, ukoliko je omogućen na smještaju (host-u) ili ako već nje pre-definiran u postavkama smještaja (host-a)

Nadam se da je pomoglo. :wink:


Copyright © 2020 WM Forum - AboutContact - Sponsored by: Mydataknox & Webmaster.Ninja