Încărcați imagini în browserul dvs.

Dacă fișierele grafice sunt mari și / sau există multe dintre acestea, încărcarea paginii în browser poate dura prea mult. Pentru a accelera descărcarea utilizând tehnici speciale.

O tehnică tipică este aceea că, la început, imaginile cu rezoluție redusă sunt încărcate din fișiere de dimensiuni mici. Pe baza acestora, se creează linkuri către fișiere cu grafică de rezoluție completă, care sunt descărcate numai când se face clic pe link. De asemenea, îl puteți utiliza într-o etichetă. cu excepția atributului SRC, atributul LOWSRC, care vă permite să încărcați mai întâi o imagine cu rezoluție scăzută și apoi, așa cum este primită, să o înlocuiți cu o imagine de înaltă rezoluție.

Cu ajutorul scriptului, puteți preîncărca imaginile în memoria cache a browserului fără a le afișa pe ecran. Afișajul va apărea atunci când browserul încarcă etichetele corespunzătoare. Acest lucru este deosebit de eficient atunci când pagina se încarcă. În timp ce imaginile sunt încărcate în memorie, rămânând invizibile, utilizatorul poate vizualiza informații textuale.

Pentru a preîncărca o imagine, trebuie să creați un obiect în memoria browserului. Acest obiect este puțin diferit de obiectul de imagine creat cu ajutorul etichetei. Ca toate obiectele create de scripturi, obiectul imaginii nu apare în fereastra browserului (o etichetă răspunde pentru afișare). Cu toate acestea, prezența sa în codul de document oferă deja încărcarea în memoria imaginii în sine când documentul este încărcat. Pentru a crea un obiect de imagine în memorie, trebuie să executați următoarea expresie în script:

myimg = imagine nouă (lățime, înălțime)

Această expresie instruiește browserul să încarce imaginea specificată în memoria cache, dar să nu o afișeze. După ce încărcați toate imaginile în memoria cache și încărcați întreg documentul, le puteți face vizibile. Pentru a face acest lucru, trebuie să atribuiți proprietatea src a elementului la valoarea aceleiași proprietăți a obiectului de imagine din memoria cache. De exemplu,

Aici, proprietatea src a primului element din documentul corespunzător etichetei este specificată în partea stângă a operatorului de atribuire. și în dreapta - proprietatea src a obiectului de imagine din memoria cache. Acum, luați în considerare ca exemplu un document HTML care afișează o listă de nume de elemente grafice și o imagine sursă. Dacă faceți clic pe un element din listă, va fi afișată imaginea corespunzătoare. Toate elementele grafice din această listă sunt preîncărcate în memoria cache și, prin urmare, afișate rapid atunci când sunt selectate din listă. Lista este cunoscută a fi creată utilizând o etichetă de container. conținând etichete. Vom genera un fragment corespunzător al codului HTML utilizând un script și îl vom scrie în documentul curent. Mai jos este codul corespunzător:

Rețineți că funcția eval () este folosită pentru a converti un șir la o referință reală a obiectului. Codul HTML care definește lista de imagini și generat de script arată astfel:

Mai jos este un exemplu al lucrării a ceea ce este descris mai sus:

Articole similare