Lazy Load

 
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 from the server. This speeds up building up the initial display of the page.

How to activate

Table IV-A19 of the Photo ALbums -> Settings admin page has a checkbox called Lazy load Load photos from the server at the moment they will show up.
Tick the box.

How it is implemented

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

Example

[wppa type="thumbs" album="205" size="300" align="center"]

Fractals made by OpaJaaps program Fractals 1.0
3652
Owens C 04-01_alt.jpg (wppa-admin)
Vote: 5.00
122 vus
3653
Owens C 05-01.jpg (wppa-admin)
Vote: 5.00
91 vus
3654
Owens C 05-01_alt.jpg (wppa-admin)
Vote: 3.00
80 vus
3655
Owens C 05-02.jpg (wppa-admin)
Vote: 5.00
104 vus
3656
Owens C 05-08.jpg (wppa-admin)
77 vus
3657
Owens C 05-08_alt.jpg (wppa-admin)
59 vus
3658
Owens C 05-13.jpg (wppa-admin)
48 vus
3659
Owens C 05-19.jpg (wppa-admin)
54 vus
3660
Owens C 05-19_alt.jpg (wppa-admin)
45 vus
3661
Owens C 05-20.jpg (wppa-admin)
56 vus
3662
Owens C 05-20_alt.jpg (wppa-admin)
44 vus
3663
Owens L 02-01.jpg (wppa-admin)
24 vus
3664
Owens L 02-01_alt.jpg (wppa-admin)
37 vus
3665
Owens L 02-02.jpg (wppa-admin)
32 vus
3666
Owens L 02-03.jpg (wppa-admin)
32 vus
3667
Owens L 02-04.jpg (wppa-admin)
35 vus
3668
Owens L 02-05.jpg (wppa-admin)
30 vus
3669
Owens L 02-06.jpg (wppa-admin)
1 commentaire
36 vus
3670
Owens L 02-07.jpg (wppa-admin)
32 vus
3671
Owens L 02-08.jpg (wppa-admin)
28 vus
3672
Owens L 02-08_alt.jpg (wppa-admin)
44 vus
3673
Owens L 03-01.jpg (wppa-admin)
33 vus
3674
Owens L 03-01_alt.jpg (wppa-admin)
20 vus
3675
Owens L 03-08.jpg (wppa-admin)
40 vus
3676
Owens L 03-08_alt.jpg (wppa-admin)
26 vus
3677
Owens O 02-01.jpg (wppa-admin)
26 vus
3678
Owens O 02-01_alt.jpg (wppa-admin)
21 vus
3679
Owens O 02-02.jpg (wppa-admin)
22 vus
3680
Owens O 02-08.jpg (wppa-admin)
19 vus
3681
Owens O 02-08_alt.jpg (wppa-admin)
22 vus
3682
Owens O 02-19.jpg (wppa-admin)
23 vus
3683
Owens O 02-19_alt.jpg (wppa-admin)
24 vus
3684
Owens O 02-20.jpg (wppa-admin)
7 vus
3685
Owens O 02-20_alt.jpg (wppa-admin)
15 vus
3686
Owens P 02-03.jpg (wppa-admin)
13 vus
3687
Owens P 02-08.jpg (wppa-admin)
11 vus
3688
Owens P 02-08_alt.jpg (wppa-admin)
18 vus
3689
Owens P 03-01.jpg (wppa-admin)
13 vus
3690
Owens P 03-01_alt.jpg (wppa-admin)
21 vus
3691
Owens P 04-01.jpg (wppa-admin)
17 vus
3692
Owens P 04-01_alt.jpg (wppa-admin)
9 vus
3693
Owens P 04-08.jpg (wppa-admin)
29 vus
3694
Owens P 04-08_alt.jpg (wppa-admin)
8 vus
3695
Quad.jpg (wppa-admin)
13 vus
3696
Quart - 2.jpg (wppa-admin)
19 vus
3697
Quart - 3.jpg (wppa-admin)
15 vus
3698
Quart - 4.jpg (wppa-admin)
22 vus
3699
Quart - 5.jpg (wppa-admin)
27 vus
3700
Smith - 1.jpg (wppa-admin)
31 vus
3701
Smith - 2.jpg (wppa-admin)
15 vus
3702
Smith - 3.jpg (wppa-admin)
35 vus
3703
Smith - 4.jpg (wppa-admin)
33 vus
3704
Spin.jpg (wppa-admin)
25 vus
3705
Sterling - 10.jpg (wppa-admin)
10 vus
3706
Sterling - 10_alt.jpg (wppa-admin)
39 vus
3707
Sterling - 11.jpg (wppa-admin)
27 vus
3708
Sterling - 11_alt.jpg (wppa-admin)
12 vus
3709
Sterling - 18.jpg (wppa-admin)
16 vus
3710
Sterling - 18_alt.jpg (wppa-admin)
15 vus
3711
Sterling - 19.jpg (wppa-admin)
18 vus
3712
Sterling - 19_alt.jpg (wppa-admin)
14 vus
3713
Sterling - 2.jpg (wppa-admin)
14 vus
3714
Sterling - 20.jpg (wppa-admin)
15 vus
3715
Sterling - 3.jpg (wppa-admin)
22 vus
3716
Sterling - 4.jpg (wppa-admin)
23 vus
3717
Sterling - 4_alt.jpg (wppa-admin)
24 vus
3718
Sterling - 5.jpg (wppa-admin)
10 vus
3719
Sterling - 52.jpg (wppa-admin)
17 vus
3720
Sterling - 52_alt.jpg (wppa-admin)
42 vus
3721
Sterling - 53.jpg (wppa-admin)
21 vus
3722
Sterling - 53_alt.jpg (wppa-admin)
10 vus
3723
Sterling - 54.jpg (wppa-admin)
18 vus
3724
Sterling - 54_alt.jpg (wppa-admin)
13 vus
3725
Sterling - 55.jpg (wppa-admin)
9 vus
3726
Sterling - 55_alt.jpg (wppa-admin)
19 vus
3727
Sterling - 5_alt.jpg (wppa-admin)
12 vus
3728
Sterling - 6.jpg (wppa-admin)
10 vus
3729
Sterling - 7.jpg (wppa-admin)
13 vus
3730
Sterling - 7_alt.jpg (wppa-admin)
23 vus
3731
Sterling - 8.jpg (wppa-admin)
12 vus
3732
Sterling - 8_alt.jpg (wppa-admin)
8 vus
3733
Sterling - 9.jpg (wppa-admin)
25 vus
3734
Sterling - 9_alt.jpg (wppa-admin)
15 vus
3735
Swanson.jpg (wppa-admin)
13 vus
3736
Tchebychev - C2.jpg (wppa-admin)
20 vus
3737
Tchebychev - C3.jpg (wppa-admin)
25 vus
3738
Tchebychev - C4.jpg (wppa-admin)
20 vus
3740
Tchebychev - C6.jpg (wppa-admin)
32 vus
3741
Tchebychev - C7.jpg (wppa-admin)
27 vus
3742
Tchebychev - S2.jpg (wppa-admin)
13 vus
3743
Tchebychev - S3.jpg (wppa-admin)
27 vus
3744
Tchebychev - S4.jpg (wppa-admin)
17 vus
3745
Tchebychev - S5.jpg (wppa-admin)
10 vus
3746
Tchebychev - S6.jpg (wppa-admin)
26 vus
3747
Tchebychev - S7.jpg (wppa-admin)
35 vus
3748
Tchebychev - T2.jpg (wppa-admin)
22 vus
3749
Tchebychev - T3.jpg (wppa-admin)
13 vus
3750
Tchebychev - T4.jpg (wppa-admin)
29 vus
3751
Tchebychev - T5.jpg (wppa-admin)
27 vus
3752
Tchebychev - T6.jpg (wppa-admin)
12 vus