Lazy Load - 'data-original attribute' input

vlogic · April 25, 2015, 4:55am

Here is a tutorial in Tips & Tricks that bartekkustra wrote that uses an alternative class based targeting method. I have not tried it myself.

Continuing the discussion from [Tutorial] How to Implement a Page loader:

[Tutorial] How to Implement a Page loader

Hey Mark,

I’d suggest using LazyLoad jQuery Plugin.
Lazy Load Remastered

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:

Use Embed Code object from library in Webflow - I would not recommend it.

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 ;)
$('.lazy').each(function() {
    $(this).attr('data-original', $(this).attr('src'));
    $(this).removeAttr('src').removeAttr('alt');
});
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.

Ok, now… We have to link ourselves to the lazyload javascript file. I’m using my own server, but you can as well just copy&paste its code inside Custom Code. That is not… easy to read, but it will work for now.

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? :)

http://quick.as/jgjhowo

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:
&lt;script&gt;
    $(document).ready(function() {
        // prepare images to lazyload
        $('.lazy').each(function() {
            $(this).attr('data-original', $(this).attr('src'));
            $(this).removeAttr('src').removeAttr('alt');
        });
        $('.lazy').lazyload();
    });
&lt;/script&gt;
Take care :)

@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=“//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/webflow1/original/2X/7/7aef29734fca89378e880f4f4a55c9c4d43406f5.jpg” width=“690” height=“392”>