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