solid jquery preloader
- Started
- Last post
- 5 Responses
- wwfc
afternoon qbn...
need some help those in the know - i am looking for a rock solid preloader that will load up all my document's image as well as showing progress (as opposed to just a looping gif)
anyone got anything that fits the bill in their lil'bag'o'trix?
or point me in the right direction - i've googled this until my eyes have scabbed over but without any great success - so hoping that one of you good folks already has found the answer?fingers crossed
;-)
- ArmandoEstrada1
I was looking for one too, but as far as progress goes(preloader), my understanding is that HTML(5) does not have a method of measuring progress on loading images. That is why you see loading gifs everywhere, unlike the days of Flash. Someone correct me if I'm wrong.
I rolled my own using imagesLoaded.js. I tried looking for a script but didn't find anything clean and simple.
- Nathan_Adams1
No loading progress, but try this:
HTML
<div class"img-wrap"><img src="placeholder.gif" data-src="realimage.jpg" /></div>JQUERY
$('img').each(function() {
var imgsrc = $(this).attr('data-src');
$(this).attr('onload','imgLoaded...
});function imgLoaded(l){
$(l).closest('.img-wrap').addCla...
};Then knock yourself out with the CSS (maybe have the img set to opacity 0, and fade in to 1 when the loaded class is added to the wrapper div).
If you want to lazy load, then combine the above with something like jQuery Waypoints.
- sted1
there is no such thing as jquery preloader, the trick what we use is hide the content with a full window overlay element (showing an animgif as fake preloader) and and use $(document).ready to hide that overlay item to make the content available when the items are loaded.
- sted0
- wwfc0
wicked! nice one for the replies - i got it sussed and working now
cheers y'all
;-)