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