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