[secag]

Kolla här och flippa mellan de 2 olika bilderna.
http://www.blocket.se/jonkoping/Buga....htm?ca=17&w=1

Det känns som den ena bilden är inladdad vid request. Är den det?
Det jag reagerade på var att den ändrar src="" på mainbilden.
Men om dom nu autoladdar filen innan, vart läggs den isåfall? Har icke hittat deras JS-funktion för detta.

[yakuzaemme]

$("#thumbs .thumb_element").click(function() {
	var thumb_link = $($(this).children(0));

	// Remove marked thumb
	$("#thumbs img").removeClass("transparent");

	// Mark selected thumb
	$("#thumbs #thumb_" + thumb_link.attr("id").substring(11)).addClass("transparent");
	blocket.apps.view.hide_video();

	// set correct "Alla bilder" css
		$('.all_images_container').removeClass("ais_all_border_active").addClass("ais_all_border_inactive");

		// get index of clicked thumb
		var image_index = parseInt(thumb_link.attr("id").replace(/thumb_link_/g, ""), 10);

		// set image source
		blocket.apps.view.set_ais_image_src(image_index);

		return false;
	});

[secag]

Tack, men det hjälper inte mig så mycket :/.

[yakuzaemme]

Om du kollar i scriptet, som de använder, så kallar de en funktion.

blocket.apps.view.set_ais_image_src(image_index);

Denna har säkert bilderna laddade. Är bilden på image_index inte redan tidigare laddad, så laddas denna med AJAX, det förklarar det lilla delayet första gången man switchar bilder, men inte efter det.

Kort och gott, AJAX.

[dAEk]

Ajax har faktiskt ingenting med saken att göra såvitt jag kan se. Jag skummade igenom js-källkoden och tyckte mig ganska snabbt kunna se att de skapar en array med sökvägar till bilderna som de sedan preloadar så fort DOM:en är klar.

[secag]

Jag valde att skriva ut alla <img länkar men endast visa den första.
sen när jag klickar på en thumb så döljs alla och sen visas den man klickade på.

Än har jag inte stött på att man ser när bilden döljs och visas. Alltså content åker upp och sen ner när den nya bilden kom upp.

[dAEk]

Jag jobbar inte med frontend-utveckling längre men jag hade nog gjort nåt åt det håller också. Fast det beror på vilka krav som finns.

På min tid preloadade man bilderna genom att skapa image-objekt i minnet (inte i DOM:en) som man sen satte src-attribut på. Detta gjorde att bilderna lästes in i bakgrunden men det är möjligt att webbläsarna har ändrat beteende sedan dess. Dessutom kanske man vill att bilderna ska finnas i Html-koden.

[Alex]

dAEk, det är så blocket preloadar också. Det är det absolut lättaste.
Lösingen du valde, secag, är okej, men inte helt rätt. Vad som händer nu är att sidan inte är "loaded" förens bilderna är inladdade, eftersom att de bor i DOM-trädet. Det spelar nog ingen roll för din del, men det kan vara bra att veta.

Ta en titt på en lösning som dAEK föreslår här;
http://engineeredweb.com/blog/09/12/...nd-javascript/

[secag]

Så man tar alltså och lägger hela <img> element i en js array?
Så när man väljer att skriva ut ett element så finns redan hela bilden i arrayen och då behöver html inte leta reda på den?

[dAEk]

Ursprungligen postat av secag

Så man tar alltså och lägger hela <img> element i en js array?
Så när man väljer att skriva ut ett element så finns redan hela bilden i arrayen och då behöver html inte leta reda på den?

Typ så, svar ja.

var images = ["http://host/images/1.jpg", "http://host/images/2.jpg", "http://host/images/3.jpg"];

for (var i in images) {
    new Image().src = images[i];
}

Hoppas att det blev lite tydligare nu.