Как предварительно загрузить изображения, используя jquery для карусели? - PullRequest
Новая
       9

Как предварительно загрузить изображения, используя jquery для карусели?

0 голосов
/ 13 апреля 2010

Я использовал плагин 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>

Как предварительно загрузить изображения, используемые mygallery div, чтобы избежать мерцания .....

Ответы [ 2 ]

1 голос
/ 13 апреля 2010

Я не знаю, нравится ли вам это учитывать. но я однажды оказался на твоем месте, и самый лучший способ, который я нашел для этого, - это поместить весь материал #mygalley на отдельную страницу и вызвать их из функции ajax stepcarousel. они будут хорошо выглядеть. попробуйте

но потом снова. Я думаю, что плавно показывая загрузчик ajax и исчезающие изображения, когда загружено аккуратно. Вы можете подумать, что это дерьмо.

1 голос
/ 13 апреля 2010

Предварительная загрузка не является хорошей практикой при работе со многими изображениями, поскольку она замедляет работу пользователя LazyLoading является предпочтительным способом загрузки изображений. Но я надеюсь, что для вашей конкретной проблемы это может помочь.

window.load - это событие, которое запускается, когда все элементы загружаются в DOM. Статья ниже также использует тот же поток: http://www.appelsiini.net/2007/6/sequentially-preloading-images

...