[Tutorial] How to Implement a Page loader

Perfect :slight_smile: Thanks a lot! Will try it soon!

Grrrreat. Works only for the first time after cache purge: http://domywilanow.webflow.com/ (try refreshing the page and puff, it is NOT working=not hiding)

https://webflow.com/design/domywilanow?preview=803b38270689cd320de42a3df122164a

(the preloader is the small brown bar on the top, this damn bastard does not hide on assets load)

EDIT: now working, but only thanks to $(window).load() custom code. @thesergie, can I ask You for little help here? I won’t go to sleep till my precious Webflow won’t work as I expect :wink:

How would you implement this to only individual images within your page? I have a lot of images and wouldn’t want to wait for all of them to load before I see my page.

Hey Mark,

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:

  1. Use 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 ;)

$('.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

Aaaaand here is the code (beside the paste of lazyload code:

<script>
    $(document).ready(function() {
        // prepare images to lazyload
        $('.lazy').each(function() {
            $(this).attr('data-original', $(this).attr('src'));
            $(this).removeAttr('src').removeAttr('alt');
        });
        $('.lazy').lazyload();
    });
</script>

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/


6 Likes

Is that it, I thought this was a help forum…

Only kidding, thanks Bartek! It’s gonna take me while so don’t hold up mate, fantastic help.

Cheers

is it possible to display loading only for homepage but other pages?

Hey,

sure it’s possible. Simply create a page loader and have it on your desired website. I’d suggest converting it to symbols when it’s done.

I’ve created a nice loader here that in navigator looks like this:

Now, I’ve selected the loader class and went to Symbols tab. Hit the + button and save a loader as symbol. Now I can reuse it in other places if I want to.

Now, make sure you have selected the loader class, because once you have a symbol you have to double-click it to edit it. If you have the loader selected press the + button on interactions panel

I have set up the Initial Appearence like following, because I have my loader style set to display: none;. Thanks to this I can edit my website easily without having to show/hide before edit and before publish.

Next thing is to set up the trigger. I used the LOAD trigger as following. The wait for assets to load gives you an advantage of waiting for this load interaction to trigger after everything on site is loaded. It’s the same as using $(window).load(); in jQuery, which I often use.

In first step I change the Opacity to 0% in 1000ms ease-in-out which gives me a nice fadeOut effect. In second step I change the display to none in 0ms which hides the loader after it fades out. Here are settings for my loader:

I have a div block which is my container that has following settings and allows me to have the content centered in the screen:


Hope this helps ;)


Sorry for the (again) long post. Here is the picture of potato for you :)

7 Likes

Thanks for all of these Bartosz! Can’t wait to try them out.

2 Likes

Hi @pingram3541 how do i implement it on the page?
Do i need to create a page loader section like @bartekkustra did in the tutorial?
Iv tried to place the Jquary on the page but it did work.

Help?

HI @NIr its really hard to answer your question because I’m not sure what you’re working with (not enough details) but @bartekkustra a few comments up posted a really nice set of instructions ending with a nice portrait of a potato =)

I’d also suggest watching the tutorials on symbols and interactions and everything should become very clear.

Good luck!

Hi @pingram3541 and @bartekkustra…?

Im referring to the Loadie.js
http://9elements.github.io/loadie.js/#

The wait for all elements to load it good (sometimes a bit glitchy).
I wanted to incorporate a bar that can show the progress like the link attached above.
Im doing something wrong when trying to add the J Quary to my page, or loader div.

You might be better finding another loader library because loadie.js responds to an ajax-driven page. That said, if you’re an experienced scripter and can write a script to parse the elements of your page into a variable that gets updated on the percent of the page load, then you should be able to do this.

First you’d have to host the loadie.js somewhere online (maybe a CDN) so you can include that script tag with the full path to the file in the custom code of your webflow project. Then you’d need to add a script AFTER it to initialize it.

ie in custom code footer section:

<script src="https://path.to.your.loadie.script.js"></script>
<script>
(function($){
$('body').loadie(); //or your custom selector $('.my-loader').loadie();

//then you'll need to provide loadie with the progress increments, not sure how you're going to do this though
var percent = customPercentFunction(); i.e 0.74
$('body').loadie(percent);
})(jQuery);
</script>
1 Like

Thanks @brryant for update ;)

Instead of a progress bar it would be better I believe to have a GIF animation that goes from 0 to 100%. Or simply a loading icon (animated) instead of a progress bar.

To create a progress bar it would require a little more coding experience. On the other hand @pingram3541’s solution looks fairly easy. The only problem with me is that I don’t like someone’s library - it doesn’t give me the freedom I wish to have using scripts.

Fixed Navbar Getting in the Way!

I have a fixed navbar that is set to slide in after a period of 300ms upon page loading. I don’t want the slide-in to activate until the loader has finished. How would I go about doing that? Thx!

(The white triangular background is the loader div which is just below Body in the hierarchy)

https://preview.webflow.com/preview/ineedtoupgrade?preview=d3f739535248784f495a2b8926e107ec

Hi @ilikewebdesign, one thing you can try, is to set the “Wait for assets to Load” checkbox. Then keep the first wait time in the interaction (currently you have it set to 2500ms) and set that to the number of milliseconds equal to the number of milliseconds that the interaction on the loading div runs.

You can also set the loader div to start after the page assets have loaded, so both interactions load with precise timing :smile:

​I hope this helps. :slight_smile:

Thanks! That seems to work perfectly!

2 Likes

Thanks a lot! I have done exact the same, but it doesnt waits for the background video to load. How can I make it wait for the video to load?

thx for sharing, this tutorial is quite useful and I am looking for guide to implement a page loader and this thread did a great help.

My page always loads at the end of the page after the fadeout. No Idea why.

EDIT: I have currently resolved it using $('html, body').animate({ scrollTop: 0 }, 0);

I’m pretty sure that you have autofocus option set for one of the fields in the contact at the bottom of the page. Can you please share the preview link?