I'd suggest using LazyLoad jQuery Plugin.
There is a whole explanation on that
:) Unfortunatelly it requires to drop the
src parameter from the
img, but you can achieve it in 2 ways:
Embed Code object from library in Webflow - I would not recommend it.
2. Do it my way.
The LazyLoad Plugin require to use a code like following:
<img class="lazy" data-original="img/example.jpg" width="640" height="480">
where you can set the
data-original parameter. You can set it in Webflow UI, but that will not be efficient, especially that you will need to remember to change it each time the image changes. Oh, and don't forget to add a class
.lazy to the object you want to lazyload! I'd use a script here that I wrote ;
This nice script of code will find all objects with class
.lazy and loop trough each one of them. It will create a data-original and change its value to the current
src. Right after it's done it will remove the
src attribute from this object. We are also removing the alt, so the text is not visible as well. Because it is done within
$(document).ready() function images will not load at all, but change to the proper value once the HTML file is processed to browser.
A lot of text here, huh? What would you say if I give you a link to video I made during the lazyload installation process?
As seen on the video above, I've did the lazyload on those images. The
src will update to orignal once we hit those images. The
threshold:200 parameter we used is to force images to load when the viewport is 200px away from them. That will prevent from "blinking". At least it should... I've just watched the video and I see it got cut off a minute before it should. Anyway, all that was after the cut is I simply refreshed the website and checked that the lazyload works
There are more effects you can use on objects (CLICK HERE to see it in action). All details about the usage of those can be found on the first link I gave in this post.
Hope it helps
Here are links to my webflow site from video
- Website Preview
- Website Design Preview
Aaaaand here is the code (beside the paste of lazyload code:
// prepare images to lazyload
@edit the Homer Simpson image is my sister's drawing for me
:P If you guys want it, here it is
:) Feel free to download it, share it etc! Here is her devianart: http://sashayaross.deviantart.com/
<img src="/uploads/webflow1/3118/8e7d5ba5bba79457.jpg" width="690" height="392">