Viewing Lazy Loading

Lazy Loading



User: Roddy 6 years ago
If a web page doesn’t download in under 2 seconds it’s too slow and the most likely problem is too many media media files such as audio, video and images. Around 80% of the “weight” of the average web page to be downloaded by the browser consists of images. This obviously includes slideshows which can be the main culprit.

Lazy loading overcomes this problem by downloading only the images that are visible within the viewport when the page is downloaded. The remaining files are downloaded just before they appear.

Lazy loading can be applied to individual images and to those in sliders. Audio MP3 and Video MP4 files are prevented from downloading with the rest of the page content and load on demand when the visitor wants to play them.

One of the most popular features for a modern website’s home page is the Hero slider with animated layers. Hero images need to be good quality with a fairly large file size since they are full width, fixed height responsive. These can noticeably effect download time. Lazy loading comes to the rescue by allowing only the current, previous and next images in the slider to download. The rest download just before they are selected.

The Hero Content Slider is an example how a home page can be enhanced with dynamics, info and links to other pages or products while avoiding poor performance in the browser.

The Lazy Load widget pack contains twelve widgets for various situations.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Roddy 6 years ago
To find out if you need to invest in lazy loading, try a speed test on your home page. It should download in less than 2 seconds. Other media rich pages should download in less than 3 seconds.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Roddy 6 years ago
Parallax Scrolling is a cool effect but uses up a lot of processing power and requires several large image files which result in poor page performance in the browser.

The Hero Parallax Background Image widget introduces a very simple and lightweight method of creating the illusion of page depth using a minimum of java script. It does however suffer from the same download speed problem of any page using a full size background image.

To overcome the download speed problem and to create a more interesting page design and layout, the idea was extended to create a background consisting of several hero style images. These are stacked in the background and can be set to scroll at a different rate from the foreground objects.

The background images are lazy loading so only the first one or two need to load with the rest of the page content.

The content can consist of any mix of hero and/or responsive widgets. Used in conjunction with other lazy loading widgets will allow the creation of media rich pages with faster download times.

The Hero Parallax Multi Image Background widget will be part of the new Hero 4 widget pack which includes some new ideas for inserting media content and display multiple videos.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Julie D. 5 years ago
Hi, I have used the hero layer slider widget to create galleries and I have issues, some images are not showing. How can I fix that? See what happen here :
http://www.juliedesmaraisdesign.com/destiny.html
User: Roddy 5 years ago
The file name of an image forms part of a URL. If you use special characters it can break the link. File names are also case sensitive so its best to make them all lower case.

Looking at your source code I can see one file name where the file format is typed as .JPG instead of .jpg,

There are also quite a few with é in them. Change this to e with no accent.

See THIS page for more info about preparing images before importing them into EverWeb.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.


Post Reply
You must login or signup to post.