Hey, I just wanted to show you that little video I made. In this tutorial you will see how I make 90% of your requests on forum. I just go on webflow and code it smile I’m sorry I didn’t talk while recording but I have some troubles with speaking. Enough talking! Here is the video:
If you like my work you can always donate using details in my profile! 
Awesome trick to get it to center @bartekkustra! Just curious, how does $(window).load(...) compare to the more standard $(document).ready(...)?
$(document).ready() is triggered when HTML document is ready (when .html file is downloaded and processed).
$(window).load() is triggered when everything on the site is loaded. Eg. If I have 50 images, each 1.5MB that gives 75MB. $(document).ready() will trigger when HTML only is loaded. $(window).load() will wait until all images are downloaded.
Best, Bartosz
That’s awesome again!! thank you
Thats awesome!!! Thanks a million @bartekkustra
@bartekkustra thanks for that tut man.
is it possible to add a Loadie.js or Nprogress loader in webflow? That youtube loader kinda of style.
http://www.jqueryscript.net/demo/Google-Like-jQuery-Slim-Progress-Bar-Plugin-NProgress/
Sure, I do it with script tags in site settings > Add code before </body> tag: area and simply host the js file(s) on a private server. Same thing with stylesheets like animate.css.
@bartekkustra, is there a way to do what @Jonas76 is talking about on webflow
is it possible to integrate one of the above effects into this tutorial? If so how?
Hey @bartekkustra and all we added “Wait for assets to load” checkbox for the Load Trigger in Interactions panel. So now you can mimic $(window).load() (after all assets/images on the page load) to create a loader for your Webflow site.
You can set an element to absolute position with all sides set to 0 with an animated gif in in the center. Then you can have it fade to opacity 0 then display: none. Boom - page loader.
Try it out!
Perfect 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 
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:
Embed Code object from library in Webflow - I would not recommend it.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? :)
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/
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 :)
Thanks for all of these Bartosz! Can’t wait to try them out.
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?
