0

我使用了 jquery stepcarousel 插件，它工作正常......但是如何预加载插件使用的图像......我正在使用这个，

<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>

如何预加载mygallerydiv 使用的图像以避免闪烁.....

4

2 回答 2

1

我不知道你是否愿意考虑这个。但我曾经处于你的位置，我找到的最简洁的方法是将整个#mygalley 内容放在一个单独的页面中，并从 stepcarousel 的 ajax 功能中调用它们。他们会很好看。试试看

但话又说回来。我认为在加载时流畅地显示 ajax 加载器和褪色图像很整洁。你可能会认为它是废话。

于 2010-04-13T09:24:48.583 回答
1

在处理许多图像时，预加载不是一个好习惯，因为它会减慢用户的体验。LazyLoading 是加载图像的首选方式。但是对于您的具体问题，我希望这会有所帮助。

window.load 是在 DOM 中加载所有元素时触发的事件。下面的文章也使用相同的流程： http: //www.appelsiini.net/2007/6/sequentially-preloading-images

于 2010-04-13T06:49:37.920 回答