使用jQuery周期和Ajax动态地创建幻灯片 - 影像不会立即装入幻灯片、周期、影像、动态
目前，我想要做一个廉价的，简单的幻灯片放映导航盒为客户（以及什么的，比方说，红袜或Gamespot的使用在其网站上线的东西，但到目前为止，简单得多）。到目前为止，它实际上是未来一直很好，有一个问题 - 图像不会出现在第一次访问。他们只在页面重新加载后出现。我想这可能是某种形式的运行问题，或者一个缓存的问题，但我不知道如何解决它。我的code：
I'm currently trying to make a cheap, simple slide show navigation box for a client (something along the lines of what, say, the Red Sox or Gamespot use on their sites, but far, far simpler). So far, it's actually coming along nicely, with one problem - the images don't appear upon a first visit. They only appear after the page is reloaded. I think it may be some sort of runtime issue, or perhaps a cache issue, but I'm not sure how to fix it. My code:
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：
HTML and 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>
我想我可能需要延迟的周期函数的时机，或者以某种方式迫使它看到的图像第一时间通过。我只是不知道如何做到这一点。
I think I may need to delay the timing of the cycle function, or perhaps somehow force it to 'see' the images the first time through. I'm just not sure how to do it.
推荐答案
自从我写了原来的答复，我发现了同样的问题出现，即使超时。我跟插件对jQuery的论坛的开发者，和他的工作的例子使用$ .getJSON而不是$不用彷徨。我切换到的是，它完美地工作。我只能假设有间$ .getJSON如何分析数据，如何我和解析功能的手动调用做一些轻微的，微妙的差异。无论是在分析完成后的实际code问题或计时问题仍是一个谜。
Since I wrote the original answer, I found that the same problem was occurring even with the timeout. I talked to the developer of the plugin on the jQuery forums, and his working example used $.getJSON rather than $.get. I switched to that, and it worked perfectly. I can only assume that there's some slight, subtle difference between how $.getJSON parses data and how I was doing it with the manual invocation of the parse function. Whether it's an actual code issue or timing issue of when the parsing is done remains a mystery.
我的解决办法：
<!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>
上一篇：preventing链接之前的jQuery加载加载、链接、preventing、jQuery
下一篇：jQuery的：获取.timeago（）上班后DOM准备装元素（阿贾克斯）班后、元素、timeago、jQuery
