How to preload images using jquery for carousel?
I used jquery stepcarousel plugin and it works fine... But how to preload images that is used by the plugin... I am using this,
<div id="mygallery" class="stepcarousel">
<div class="belt">
<div class="panel">
<img src="Images/img1.jpg" />
</div>
<div class="panel">
<img src="Images/img2.jpg" />
</div>
</div>
</div>
<script type="text/javascript">
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: { enable: true, moveby: 1, pause: 3000 },
panelbehavior: { speed: 500, wraparound: false, persist: true },
defaultbuttons: { enable: true, moveby: 1, leftnav: ['Images/lft_arrow.jpg', -5, 220], rightnav: ['Images/rit_arrow.jpg', -5, 220] },
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
conten开发者_StackOverflow中文版ttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})
</script>
How to preload images used by mygallery
div such that i can avoid flickering.....
I don't know if you like to consider this. but I was once in your position and the neatest way i found for it was to put the whole #mygalley stuff in a separate page and call them from stepcarousel's ajax functionality. they will look nice. try it
but then again. I think smoothly showing ajax loader and fading images when loaded is neat. you might think its crap.
Preloading is not a a good practice when dealing with many images as it will slow down the experience for user. LazyLoading is a preferred way for loading images. But for your specific problem i hope this can help.
window.load is the event that get fired when all elements get loaded in DOM. Article below also use the same flow: http://www.appelsiini.net/2007/6/sequentially-preloading-images
精彩评论