How can I hide a DIV until it’s scrolled to?
I want to speed up the loading of several large background images, because these are not IMG elements, Lazy Load isn’t really an option. Other things I have considered include separating my page into three sections and using an infinite scroll plugin and replacing the background images with IMGs lower in the z-index.
Thanks very much!
All CSS background images are loaded shortly after the stylesheet is parsed. You can’t load them any faster. If they’re big, consider better compression. Using several smaller ones will not make them load any faster because you have network overhead for each image on top of the download time.
You can make the appearance of “lazy loading” by adding
"display:none"to your DIV and use$('divName').fadeIn('slow')after the page had loaded.