- Framework7 Tutorial
- Framework7 - Home
- Framework7 - Overview
- Framework7 - Environment
- Framework7 Components
- Framework7 - Layouts
- Framework7 - Navbars
- Framework7 - Toolbars
- Framework7 - Search Bar
- Framework7 - Status Bar
- Framework7 - Side Panels
- Framework7 - Content Block
- Framework7 - Layout Grid
- Framework7 - Overlays
- Framework7 - Preloaders
- Framework7 - Progress Bar
- Framework7 - List Views
- Framework7 - Accordion
- Framework7 - Cards
- Framework7 - Chips
- Framework7 - Buttons
- Framework7 - Action Button
- Framework7 - Forms
- Framework7 - Tabs
- Framework7 - Swiper Slider
- Framework7 - Photo Browser
- Framework7 - Autocomplete
- Framework7 - Picker
- Framework7 - Calendar
- Framework7 - Refresh
- Framework7 - Infinite Scroll
- Framework7 - Messages
- Framework7 - Message Bar
- Framework7 - Notifications
- Framework7 - Lazy Load
- Framework7 Styling
- Framework7 - Color Themes
- Framework7 - Hairlines
- Framework7 Templates
- Framework7 - Templates Overview
- Framework7 - Auto Compilation
- Framework7 - Template7 Pages
- Framework7 Fast Clicks
- Framework7 - Active State
- Framework7 - Tap Hold Event
- Framework7 - Touch Ripple
- Framework7 Useful Resources
- Framework7 - Quick Guide
- Framework7 - Useful Resources
- Framework7 - Discussion
Framework7 - Lazy Load Usage
Description
The lazy load can be applied to images, background images and with fade-in effect as described below −
For images <img>
To make use of lazy load on images follow the given steps −
Use data-src attribute instead of src attribute to specify image source.
Add class lazy to image.
<div class = "page-content"> ... <img data-src = "image_path.jpg" class = "lazy"> ... </div>
For Background Images
Lazy load can also be used for background images, for this case follow the given steps −
Specify background image source into data-background.
Add class lazy to image.
<div class = "page-content"> ... <div data-background = "image_path.jpg" class = "lazy"> ... </div> ... </div>
With Fade-in Effect
You can add fade-in effect to your images by using the lazy-fadein class to image/element.
<div class = "page-content"> ... <img data-src = "image_path.jpg" class = "lazy lazy-fadein"> <div data-background = "image_path.jpg" class = "lazy lazy-fadein"> ... </div> ... </div>
framework7_lazy_load.htm
Advertisements