Question

我目前正在尝试为客户制作一个便宜，简单的幻灯片导航盒（比如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>

我想我可能需要延迟循环功能的时间，或者可能以某种方式强迫它第一次“看到”图像。我只是不确定该怎么做。

Answer 1

有两个可能的原因（或者我错过了更多的原因）可能是奇怪的加载：

您的通话未包含在document.ready中（即使您的JavaScript代码位于页面底部） - 这可能不是问题......只是一个想法。

即。创建一个函数来保存你的加载并执行：
```
$(document).ready(function(){
    loadImages();
    startSlideShow();
});
```
另一件事可能是在第一次加载时，图片没有下载到您的浏览器。在显示循环组件之前，您可以检查所有图像是否已完成加载（使用计数器并在所有图像等上加载）。这可以修复Chrome。

注意：内置.each比“for”循环更快。（特别是对于IE和许多项目......）

例如：

$(newImages).each(function(){
    $('#slideshow').append($(this));
});

Answer 2

任何想法如何让它与常规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返回的内容是一组图片以及一些文字内容。

Answer 3

由于我写了原始答案，我发现即使超时也会出现同样的问题。我在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>

使用jQuery Cycle和ajax动态创建幻灯片 - 图像不会立即加载

3 个答案: