Использование jQuery Cycle и ajax для динамического создания слайд-шоу - изображения загружаются не сразу - PullRequest
Новая
       4

Использование jQuery Cycle и ajax для динамического создания слайд-шоу - изображения загружаются не сразу

4 голосов
/ 05 августа 2010

В настоящее время я пытаюсь сделать дешевое, простое навигационное окно для слайд-шоу для клиента (что-то вроде того, что, скажем, Red Sox или Gamespot используют на своих сайтах, но намного, намного проще). Пока что все идет хорошо, с одной проблемой - изображения не появляются при первом посещении. Они появляются только после перезагрузки страницы. Я думаю, что это может быть какая-то проблема во время выполнения или, возможно, проблема с кешем, но я не уверен, как это исправить. Мой код:

PHP: 

if (isset($_GET['start']) && "true" === $_GET['start'])
{
    $images = array();

    if ($dir = dir('images'))
    {
        //$count = 0;

        while(false !== ($file = $dir->read()))
        {
            if (!is_dir($file) && $file !== '.' && $file !== '..' && (substr($file, -3) === 'jpg' || substr($file, -3) === 'png' || substr($file, -3) === 'gif'))
            {
                $lastModified = filemtime("{$dir->path}/$file");
                $images[$lastModified] = $file;
                //$images["image$count"] = $file;
                //++$count;
            }
        }

        echo json_encode($images);
    }
    else { echo "Could not open directory"; }
}

HTML и JavaScript: 

<!doctype html>
<html lang="en-us">
    <head>
        <title>jQuery Cycle test</title>
        <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
        <style>
            #slideshow a { margin: 0; padding: 0; color: #fff; }
        </style>
    </head>

    <body>
        <div id="slideshow">
        </div>
    </body>

    <script type="text/javascript">
        $.get('slideshow.php', {start : "true"}, function(data){
            var images = JSON.parse(data);

            for(var image in images){
                $('#slideshow').append('<a href="images/' + images[image] + '"><img src="images/' + images[image] + '" alt="" /></a>');
            }

            $('#slideshow').cycle({
                fx: 'cover',
                direction: 'right',
                timeout: 3000,
                speed: 300
            });
        });
    </script>

</html>

Я думаю, что мне может понадобиться отложить синхронизацию функции цикла или, возможно, каким-то образом заставить ее «увидеть» изображения с первого раза. Я просто не уверен, как это сделать.

Ответы [ 3 ]

2 голосов
/ 10 августа 2010

Есть две возможные причины (или больше, которые я пропускаю), что это могло загружаться странно:

  1. Ваш звонок не включен в document.ready (даже если ваш код JavaScript находится внизу страницы) - это может не быть проблемой ... просто мысль.

    т.е. создайте функцию для хранения вашей загрузки и выполните: 

    $(document).ready(function(){
    loadImages();
    startSlideShow();
});

  2. Другое дело, что при первой загрузке изображения не загружаются в ваш браузер. Вы можете проверить, все ли изображения закончили загрузку (используйте счетчик и загружены на все изображения и т. Д.), Прежде чем показывать компонент цикла. Это может исправить это для Chrome.

Примечание: Встроенный .each намного быстрее, чем "for". (специально для IE и многих предметов ...)

Например: 

$(newImages).each(function(){
    $('#slideshow').append($(this));
});
1 голос
/ 10 августа 2010

Поскольку я написал исходный ответ, я обнаружил, что та же проблема возникает даже с таймаутом. Я разговаривал с разработчиком плагина на форумах jQuery, и его рабочий пример использовал $ .getJSON вместо $ .get. Я переключился на это, и это сработало отлично. Я могу только предположить, что есть небольшая, тонкая разница между тем, как $ .getJSON анализирует данные, и тем, как я делал это с ручным вызовом функции разбора. Является ли это фактической проблемой кода или проблемой синхронизации, когда анализ выполняется, остается загадкой.

Мое решение: 

<!doctype html>
<html lang="en-us">
    <head>
        <title>jQuery Cycle test</title>
        <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>

        <style>
            #slideshow a { margin: 0; padding: 0; color: #fff; display: block; }
            img { width: 305px; height: 278px; }
        </style>
    </head>

    <body>
        <div id="slideshow">
        </div>
    </body>

    <script type="text/javascript">     
        $.getJSON('slideshow.php', function(images){
            for(var i = 0; i < images.length; ++i){
                $('#slideshow').append('<a href="images/' + images[i]['src'] + '"><img src="images/' + images[i]['src'] + '" alt="" /></a>');
            }

            $('#slideshow').cycle({fx: 'cover', direction: 'right', timeout: 3000, speed: 300});
        });
    </script>

</html>
1 голос
/ 10 августа 2010

Есть идеи, как заставить его работать с обычным get?Вот что я использую: 

    $.get(loadUrl, { id: id },
     function(data){
          $('#loader').remove();
             window.scrollTo(0,0);
          $('#display').html(data);             
          startCycle();
          });

function startCycle() {
     //trigger cycle
     $('.images').cycle({
          fx:     'fade',
          speed:  500,
          timeout: 0,
          pager: '#sub-nav .root',
          prev: "#sub-nav .prev",
          next: "#sub-nav .next",
          before: onAfter
      });

     $("#sub-nav a:first").addClass("first");
} //start cycle

Содержимое, возвращаемое ajax, представляет собой группу изображений, а также некоторое текстовое содержимое.

...