{"id":6336,"date":"2020-02-19T10:32:11","date_gmt":"2020-02-19T09:32:11","guid":{"rendered":"http:\/\/wppa.nl\/?page_id=6336"},"modified":"2021-08-31T13:05:58","modified_gmt":"2021-08-31T11:05:58","slug":"lazy-load","status":"publish","type":"page","link":"https:\/\/wppa.nl\/sv\/docs-by-subject\/advanced-topics\/optimization\/lazy-load\/","title":{"rendered":"Lazy Load"},"content":{"rendered":"
What it does<\/h6>\n

When a large display of e.g. many thumbnails or many images in a filmstrip are potentially visible, only the ones that are actually inside the viewport c.q. browser window will be loaded from the server. As soon as other images become inside the viewport e.g. by scrolling, the images will be loaded from the server. This speeds up building up the initial display of the page.<\/p>\n

How to activate<\/h6>\n

Select one of the options not being off<\/em> in Advanced settings -> System -> I -> Item 23: Lazy load<\/strong><\/p>\n

How it is implemented<\/h6>\n

The way this is achieved is as smart as simple: On building up the page content, wppa <img><\/code> tags do not contain the src=\"...\"<\/code> attribute, but the data-src=\"...\"<\/code> attribute containing the images url.
\nOn the events DOMContentLoaded<\/em>, resize<\/em>, scroll<\/em>, orientationchange<\/em> and a few others, the function wppaMakeLazyVisible()<\/code> is called that replaces the attribute data-src<\/code> by src<\/code> with the same url for those images that became (partially) 'in sight'.
\nThis immediately causes the images to be loaded. The data-src<\/code> attribute is removed, so the check and creation of the src attribute happens only once for each lazy load image.<\/p>\n

Example<\/h6>\n

[<\/b>wppa type=\"thumbs\" album=\"205\" size=\"300\" align=\"center\"]<\/b>
\n \n

<\/div>
<\/path><\/path><\/svg>
Docs by subject<\/a>\u2022<\/span><\/span>Advanced topics<\/a>\u2022<\/span><\/span>Optimization<\/a>\u2022<\/span><\/span>Lazy Load<\/a>\u2022<\/span><\/span>Fractals<\/span>
<\/div><\/div>
<\/g><\/svg><\/a><\/div>\n
<\/g><\/svg><\/a><\/div>\n
 1  <\/div>
 2  <\/a><\/div>
 3  <\/a><\/div>
 4  <\/a><\/div>
 5  <\/a><\/div>
 6  <\/a><\/div>
 7  <\/a><\/div> . . .
<\/div><\/div>\n
<\/div>
<\/div>
Fractals made by OpaJaaps program Fractals 1.0<\/div>
<\/div>
\"3652\"<\/a><\/div>
Owens C 04-01_alt.jpg (wppa-admin)<\/div>
<\/div>
<\/div>
Betyg: 4.50<\/div>
1079 views<\/div><\/div><\/div>
\"3653\"<\/a><\/div>
Owens C 05-01.jpg (wppa-admin)<\/div>
<\/div>
<\/div>
Betyg: 3.00<\/div>
678 views<\/div><\/div><\/div>
\"3654\"<\/a><\/div>
Owens C 05-01_alt.jpg (wppa-admin)<\/div>
<\/div>
<\/div>
Betyg: 1.67<\/div>
647 views<\/div><\/div><\/div>
\"3655\"<\/a><\/div>
Owens C 05-02.jpg (wppa-admin)<\/div>
<\/div>
<\/div>
Betyg: 5.00<\/div>
1940 views<\/div><\/div><\/div>
\"3656\"<\/a><\/div>
Owens C 05-08.jpg (wppa-admin)<\/div>
<\/div>
<\/div>
<\/div>
626 views<\/div><\/div><\/div>
\"3657\"<\/a><\/div>
Owens C 05-08_alt.jpg (wppa-admin)<\/div>
<\/div>
<\/div>
Betyg: 3.00<\/div>
630 views<\/div><\/div><\/div>
\"3658\"<\/a><\/div>
Owens C 05-13.jpg (wppa-admin)<\/div>
<\/div>
<\/div>
<\/div>
599 views<\/div><\/div><\/div>
\"3659\"<\/a><\/div>
Owens C 05-19.jpg (wppa-admin)<\/div>
<\/div>
<\/div>
<\/div>
598 views<\/div><\/div><\/div>
\"3660\"<\/a><\/div>
Owens C 05-19_alt.jpg (wppa-admin)<\/div>
<\/div>
<\/div>
<\/div>
607 views<\/div><\/div><\/div>
\"3661\"<\/a><\/div>
Owens C 05-20.jpg (wppa-admin)<\/div>
<\/div>
<\/div>
<\/div>
593 views<\/div><\/div><\/div>
\"3662\"<\/a><\/div>
Owens C 05-20_alt.jpg (wppa-admin)<\/div>
<\/div>
<\/div>
<\/div>
586 views<\/div><\/div><\/div>
\"3663\"<\/a><\/div>
Owens L 02-01.jpg (wppa-admin)<\/div>
<\/div>
<\/div>
<\/div>
542 views<\/div><\/div><\/div>
\"3664\"<\/a><\/div>
Owens L 02-01_alt.jpg (wppa-admin)<\/div>
<\/div>
<\/div>
<\/div>
584 views<\/div><\/div><\/div>
\"3665\"<\/a><\/div>
Owens L 02-02.jpg (wppa-admin)<\/div>
<\/div>
<\/div>
<\/div>
599 views<\/div><\/div><\/div>
\"3666\"<\/a><\/div>
Owens L 02-03.jpg (wppa-admin)<\/div>
<\/div>
<\/div>
<\/div>
557 views<\/div><\/div><\/div>
\"3667\"<\/a><\/div>
Owens L 02-04.jpg (wppa-admin)<\/div>
<\/div>
<\/div>
<\/div>
543 views<\/div><\/div><\/div>
\"3668\"<\/a><\/div>
Owens L 02-05.jpg (wppa-admin)<\/div>
<\/div>
<\/div>
<\/div>
556 views<\/div><\/div><\/div>
\"3669\"<\/a><\/div>
Owens L 02-06.jpg (wppa-admin)<\/div>
<\/div>
<\/div>
<\/div>
1 kommentar<\/div>
2005 views<\/div><\/div><\/div>
\"3670\"<\/a><\/div>
Owens L 02-07.jpg (wppa-admin)<\/div>
<\/div>
<\/div>
<\/div>
576 views<\/div><\/div><\/div>
\"3671\"<\/a><\/div>
Owens L 02-08.jpg (wppa-admin)<\/div>
<\/div>
<\/div>
<\/div>
493 views<\/div><\/div><\/div>
<\/div><\/div><\/div>
<\/g><\/svg><\/a><\/div>\n
<\/g><\/svg><\/a><\/div>\n
 1  <\/div>
 2  <\/a><\/div>
 3  <\/a><\/div>
 4  <\/a><\/div>
 5  <\/a><\/div>
 6  <\/a><\/div>
 7  <\/a><\/div> . . .
<\/div><\/div>\n
<\/div>
<\/div><\/div><\/div>\n
\n<\/p>\n","protected":false},"excerpt":{"rendered":"

What it does When a large display of e.g. many thumbnails or many images in a filmstrip are potentially visible, only the ones that are actually inside the viewport c.q. browser window will be loaded from the server. As soon as other images become inside the viewport e.g. by scrolling, the images will be loaded [...]<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":6334,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6336","page","type-page","status-publish","hentry","post-seq-1","post-parity-odd","meta-position-corners","fix"],"_links":{"self":[{"href":"https:\/\/wppa.nl\/sv\/wp-json\/wp\/v2\/pages\/6336","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wppa.nl\/sv\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wppa.nl\/sv\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wppa.nl\/sv\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wppa.nl\/sv\/wp-json\/wp\/v2\/comments?post=6336"}],"version-history":[{"count":3,"href":"https:\/\/wppa.nl\/sv\/wp-json\/wp\/v2\/pages\/6336\/revisions"}],"predecessor-version":[{"id":6644,"href":"https:\/\/wppa.nl\/sv\/wp-json\/wp\/v2\/pages\/6336\/revisions\/6644"}],"up":[{"embeddable":true,"href":"https:\/\/wppa.nl\/sv\/wp-json\/wp\/v2\/pages\/6334"}],"wp:attachment":[{"href":"https:\/\/wppa.nl\/sv\/wp-json\/wp\/v2\/media?parent=6336"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}