Aceasta este, URL-ul real este în realsrc atribut (puteți selecta orice nume de atribut). Și în src este setat un GIF gri de dimensiunea 1x1 și din moment ce lățimea / înălțimea este corectă, acesta este întins, astfel încât în loc de imagine să fie vizibil un dreptunghi gri.
În acest caz, pentru ca browserul să încarce imaginea, este necesar să înlocuiți valoarea lui src cu cea din realsrc.
Dacă pagina este mare, înlocuirea imaginilor mari cu astfel de layouturi accelerează semnificativ încărcarea completă a paginii. Acest lucru este deosebit de evident atunci când există multe anunțuri de știri cu imagini sau imagini de bunuri pe pagină, dintre care multe sunt în afara scrolling-ului.
Scrieți codul, care, atunci când defilați fereastra, încarcă imaginile care au devenit vizibile.
Adică, de îndată ce imaginea a intrat în partea vizibilă a documentului - în src este necesar să se înregistreze adresa URL corectă din realsrc.
Un exemplu de lucru pe care îl puteți vedea în iframa de mai jos, dacă îl defilați:
- La pornire, unele imagini ar trebui să fie vizibile imediat, înainte de defilare. Codul trebuie să ia în considerare acest lucru.
- Unele imagini pot fi obișnuite, fără realsrc. Codul lor nu trebuie atins deloc.
- De asemenea, codul nu trebuie să supraîncarce imaginea deja afișată.
- Este de dorit să se asigure încărcarea imaginilor nu numai vizibile acum, ci și la pagina înainte și înapoi din locația curentă.
P.S. Nu există derulare orizontală.
Funcția trebuie să determine, prin deplasarea curentă, ce imagini sunt vizibile și să le încărcați.
Ar trebui să funcționeze nu numai atunci când defilați, dar și la încărcare. Este suficient pentru asta - să specificați apelul său în scriptul de sub pagină, după cum urmează:
La pornire, funcția caută toate imaginile vizibile cu realsrc și mută valoarea realsrc la src. Fiți atenți, deoarece. atributul realsrc este nestandard, apoi folosim get / setAttribute pentru a accesa el. Și src este standard, deci vă puteți referi la proprietatea DOM.
Funcția de verificare a vizibilității esteVisible (elem) obține coordonatele zonei vizibile actuale și le compară cu elementul.
Pentru vizibilitate, este suficient ca coordonatele limitei superioare (sau inferioare) a elementului să se situeze între limitele regiunii vizibile.
De asemenea, soluția specifică opțiunea cu isVisible. care extinde domeniul de aplicare cu ± 1 pagină (înălțimea paginii - document.documentElement.clientHeight).
Trimiteți-le prietenilor: