Comment précharger des images en utilisant jquery pour un carrousel ?

Question

J'ai utilisé le plugin jquery stepcarousel et il fonctionne bien... Mais comment précharger les images qui sont utilisées par le plugin... J'utilise ceci,

<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
        contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
    })

</script>

Comment précharger les images utilisées par mygallery div tel que je puisse éviter le scintillement.....

Answer 1

Le préchargement n'est pas une bonne pratique lorsqu'il s'agit de nombreuses images, car il ralentit l'expérience de l'utilisateur. LazyLoading est la meilleure méthode pour charger les images. Mais pour votre problème spécifique, j'espère que cela peut vous aider.

window.load est l'événement qui est déclenché lorsque tous les éléments sont chargés dans le DOM. L'article ci-dessous utilise également le même flux : http://www.appelsiini.net/2007/6/sequentially-preloading-images

Answer 2

Je ne sais pas si vous aimez considérer cela, mais j'ai été une fois dans votre position et le meilleur moyen que j'ai trouvé pour cela a été de mettre tout le matériel #mygalley dans une page séparée et de les appeler à partir de la fonctionnalité ajax de stepcarousel. ils auront l'air bien. essayez.

mais là encore. Je pense que le fait d'afficher un chargeur ajax et de faire disparaître les images lorsqu'elles sont chargées est génial. Vous pouvez penser que c'est de la merde.