How to implement lazy load to booklet.js?
To check if lazy load works,
On partial load - i save the page (Save As) in my browser and compare it with the fully loaded page.
[the size of fully loaded page >> size of partially load page]
when i follow the same procedure, the entire page is always saved.
[the size of fully loaded page = size of partially load page]
My booklet is full of images and I fear its making the page heavy and slow.
I use this script to initiate lazyload :
<script>
(function($){
$(document).ready(function(){
$("img.lazy").lazyload({
effect:"fadeIn",
container: $("#mybook"
)
}
);
$("img.lazy").show().lazyload()})
})(jQuery);
</script>
All my images are contained in the main container for Book.js i.e. <div id="mybook"></div>
For the images, I use the fall back for non JS support,
Example:
<img class="lazy" data-original="image1.jpg" alt="Cover Page " width="415" height="557" />
<noscript> <img src="image1.jpg" alt="Cover Page " width="415" height="557">
</noscript>
Please help me.