使用jQuery Cycle和ajax动态创建幻灯片 – 图像不会立即加载
我目前正在尝试为客户制作一个便宜，简单的幻灯片导航盒（比如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：
jQuery Cycle test #slideshow a { margin: 0; padding: 0; color: #fff; } $.get('slideshow.php', {start : "true"}, function(data){ var images = JSON.parse(data); for(var image in images){ $('#slideshow').append('
'); } $('#slideshow').cycle({ fx: 'cover', direction: 'right', timeout: 3000, speed: 300 }); });
我想我可能需要延迟循环function的时间，或者可能以某种方式强迫它第一次“看到”图像。 我只是不确定该怎么做。
有两个可能的原因（或者我错过的更多）可能是奇怪的加载：
-
您的调用未包含在
document.ready（即使您的JavaScript代码位于页面底部） – 这可能不是问题……只是一个想法。即创建一个函数来保存您的加载并执行：
$(document).ready(function(){ loadImages(); startSlideShow(); }); -
另一件事可能是在第一次加载时，图像没有下载到您的浏览器。 在显示循环组件之前，您可以检查所有图像是否已完成加载（使用计数器并在所有图像等上加载）。 这可以解决Chrome的问题。
注意：内置的.each比“ for ”循环更快。 （特别针对IE和许多项目…）
例如：
$(newImages).each(function(){ $('#slideshow').append($(this)); });
自从我写了原始答案以来，我发现即使超时也会出现同样的问题。 我在jQuery论坛上与插件的开发人员交谈，他的工作示例使用$ .getJSON而不是$ .get。 我切换到那，它完美地工作。 我只能假设$ .getJSON如何解析数据与我如何通过手动调用解析函数之间存在一些细微的差别。 无论是实际的代码问题还是解析完成时的时间问题仍然是一个谜。
我的解决方案
jQuery Cycle test
知道如何让它与常规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返回的内容是一组图像以及一些文本内容。