Prerequisites
Slider's main JavaScript settings:
https://www.themepunch.com/revsliderjquery-doc/anatomy-basic-slider/#javascript-settings
Slider's main Background Image:
https://www.themepunch.com/revsliderjquery-doc/backgrounds-image-video/
Image Layers:
https://www.themepunch.com/revsliderjquery-doc/layer-content/#image
Optional Preloader/Spinner:
/* slider's main JavaScript settings */
jQuery('#rev_slider_1').show().revolution({
sliderLayout: 'auto',
gridwidth: 1240,
gridheight: 868,
/* PRELOADER OPTION "0" */
spinner: 'spinner0',
/* ****************** */
/* settings continued */
/* ****************** */
Lazy Loading:
Lazy Load the Slide's main Background:
<!-- BEGIN SLIDE -->
<li data-transition="fade">
<!--
"small transparent image loaded by default,
and real image url added as the image's "data-lazyload" attribute
-->
<img src="assets/images/dummy.png"
data-lazyload="assets/images/notgeneric_bg5.jpg"
alt="Ocean"
class="rev-slidebg"
data-bgposition="center center"
data-bgfit="cover"
data-bgrepeat="no-repeat">
</li>
<!-- END SLIDE -->
Lazy Load an Image Layer:
<!-- BEGIN IMAGE LAYER -->
<div class="tp-caption tp-resizeme" data-type="image"
data-frames='[{"delay": 500, "speed": 300, "from": "opacity: 0", "to": "opacity: 1"},
{"delay": "wait", "speed": 300, "to": "opacity: 0"}]'>
<!--
"small transparent image loaded by default,
and real image url added as the image's "data-lazyload" attribute
-->
<img src="assets/images/dummy.png"
data-lazyload="assets/images/ihpone_dark.png"
alt="App Store"
width="260"
height="450">
</div>
<!-- END IMAGE LAYER -->
Declare a "LazyLoad Type"
“all” = All images will be Lazy Loaded by default.
“smart” = Lazy Load images from the current slide, the previous slide, and the next slide.
“single” = Only Lazy Load images from the current slide.
“none” = No Lazy Loading by default
/* slider's main JavaScript settings */
jQuery('#rev_slider_1').show().revolution({
sliderLayout: 'auto',
gridwidth: 1240,
gridheight: 868,
/* Lazy Load options are "all", "smart", "single" and "none" */
lazyType: "smart",
/* ****************** */
/* settings continued */
/* ****************** */