WN - Hur autoloadar Blocket sina bilder?

Sidan 1 av 2

Visa 40 inlägg från det här ämnet på en sida

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Hur autoloadar Blocket sina bilder? (https://www.wn.se/forum/showthread.php?t=1057132)

secag

2013-03-07 18:32

Hur autoloadar Blocket sina bilder?

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

2013-03-07 19:17

Kod:

$("#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

2013-03-07 19:19

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

yakuzaemme

2013-03-07 19:35

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

Citat:

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	2013-03-07 20:33

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

2013-03-07 21:02

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	2013-03-07 22:32

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	2013-03-07 23:00

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

2013-03-07 23:10

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	2013-03-08 20:17

Citat:

Ursprungligen postat av secag (Inlägg 20464327)

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.

Kod:

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.

Alla tider är GMT +2. Klockan är nu 02:29.

Sidan 1 av 2

Visa 40 inlägg från det här ämnet på en sida