Streaming live at 10am (PST)

Suggestion: Loaders


#1

It would be a nice touch to have an option to show a load animation while a page loaded - or even much better yet, a section.

Good to be an option only, since for most pages/sections, it might be an annoyance. (Generally, content loads at reasonable speeds and people are used to seeing pages build as it's rendered.)

But it would provide a little flexibility on pages where larger images or other slower-loading content could provide value.


#2

Thanks for the suggestion Allen!

That would also be a cool addition for web applications pages that download tons of data from a database. For static sites I think the best thing to do is to compress images so they load faster. When we implement a lightbox (image gallery modal window) we'll consider adding a loader for big images for sure.

Keep them coming!


#3

Thanks Sergie - I do think it's almost an edge case request so would expect it to be far down the list and understandably maybe not make the list at all. As sort of a sidebar note though, it would permit some design freedom we aren't accustomed to, in that there's limited compression options available for images with 8 bit alpha channels. We're all used to designing without that capability, but also always looking for ways to remove the supporting technology from design constraints. smile


#4

Or you could also create a div block that fills the whole browser window, set it's background color, make a loading gif to appear in the very middle (using jQuery of course) and make it appear on top of everything (z-index high value). Then on custom code you can set the following:

$(document).ready(function() {
  $('.loading-block').fadeOut();
});

That way you can force the load block to appear when the page is loading as the first thing to show, and let the stuff behind it load in the meantime. It's freaking easy to do wink


#5

Hi @bartekkustra, I may be taking your snippet too literally, but I ran a quick test and it doesn't seem to be doing the job for me. The loading-block div starts fades out immediately, and (with browser cached cleared) I can see my large test images download/render after the loading-block is gone. I made the test images ridiculously heavy to compensate for my fairly fast connection and machine, I wouldn't load a real page up that far.

Here's a troubleshooting link in case you have a minute to see if I'm missing something obvious:
https://webflow.com/design/scratchpad?preview=74ec330c85beb0191cd0aef7996b119a

Thanks!


#6

I alao need the code you have used (please use code tags) and link to live site.


#7

Sorry, thought the troubleshooting version gave access to that:

http://scratchpad.webflow.com/


#8

Try this:

$(window).load(function() {
  $('.loading-block').fadeOut();
});

#9

Works great - thanks!


#10

Hi guys,
so far I've spent a bit more than one month working with webflow and I'm quite familiar with the workflow but still a newbie in the website world. I have followed your steps (indeed looks very simple) but I cannot figure out what's wrong with me since I'm missing more basic steps. It would be great if you can explain more in detail the loader issue. Otherwise I would appreciate some reply to my questions:
1-do I need to insert the div block (called 'loading-block) in my' home' page or does it go in a separate empty page? so it will be activated every time we need to load any page?
2-Whatever the case, do we need to insert a section 100% wide and 100% high to fill the screen, then insert the div block inside? Or just put the div block inside the body? I think the custom code doesn't call any section (?)
3- Which jquery can I use to fix the gif in the center of the screen?

Thanks


#11

Thanks for these tips!! Working great


#13

Any success on this? I have the same issue


#14

I've created a <div id="content-loader">...</div> in which I have a centered gif-icon or text that stands for a loading info. Then I create a symbol of that div and I make it to be at the very top in nagivator panel on every page I have. Then I use the code that I posted in this thread on January, 12.


#15