幻灯片在加载图像时开始,但在下载所有图像之前不会显示第一个图像
Slideshow starts while images are loading but first image isn't displayed until all are downloaded
我正在使用 Cycle2 创建通过 PHP 从文件夹中加载的图像的幻灯片。 您可以在此处查看实时站点:http://www.element17.com/。
这些图像可以位于许多不同的文件夹("相册")中,因此我创建了以下函数来从一个相册切换到另一个相册:
$('.togglealbum').click(function() {
$('#slideshow').cycle('destroy');
$('#slideshow').html('<div class="cycle-overlay custom" id="info"></div>'+all[(this).id]);
$('#slideshow').cycle();
if ($('#play').is(':visible')) {
$('#slideshow').cycle('pause');
} else {
$('#slideshow').cycle('pause').delay(3000).cycle('resume');
}
$('.togglelink,.toggleinfo').removeClass('active').addClass('fadein');
$('#albums').fadeToggle('fast');
$('.togglealbum').removeClass('cycle-pager-active');
$(this).addClass('cycle-pager-active');
$.cookie("currentalbum",(this).id,{expires:7});
});
我遇到的问题是,当加载新图像时(通过此行:$('#slideshow').html('<div class="cycle-overlay custom" id="info"></div>'+all[(this).id]);
),幻灯片基本上立即开始播放,但在全部下载之前不会显示任何图像。
这不一定是问题,除了通常似乎发生的事情是第一个图像显示一两秒钟,然后过渡到下一张幻灯片(过渡超时时间为 7 秒)。 如果您的互联网连接速度较慢,我想您甚至可能看不到第一张幻灯片。
如何防止这种情况发生? 我试图延迟幻灯片的开始,但这似乎真的很不优雅,我非常希望第一个图像在加载后立即显示,但我不确定该怎么做。
上面该行的相应代码如下:
<?php
if(isset($_COOKIE["currentalbum"])) {
$currentalbum = $_COOKIE["currentalbum"];
} else {
$currentalbum = "gallery/01_New";
}
$photolist = getphotolist($currentalbum);
$directory = 'gallery/*';
$subfolders = glob($directory);
foreach($subfolders as $subfolder) {
if(!file_exists($subfolder."/thumbs")) {
mkdir($subfolder."/thumbs", 0777);
}
$photos = glob($subfolder.'/*.[Jj][Pp][Gg]');
foreach($photos as $photo) {
$photoname = explode('.',basename($photo));
$thumbnail = $subfolder.'/thumbs/'.$photoname[0].'_thumb.jpg';
if (!file_exists($thumbnail)) {
makethumb($photo,$thumbnail,150);
}
}
$all[$subfolder] = getphotolist($subfolder);
}
$all_json = json_encode($all);
?>
非常感谢!
Yo 可以使用 data 属性来延迟幻灯片放映,直到加载所有图像:
$('#slideshow').html('<div class="cycle-overlay custom" data-cycle-loader="wait" id="info"></div>'+all[(this).id]);
Edit: This attribute, but not here though: ^^^^^^^^^^^^^^^^^^^^^^^^
查看文档以获取更多选项。
编辑:愚蠢的错误,您需要将数据属性添加到#slideshow
元素中,而不是添加到它的子元素中。
所以在原始 html 中它会是这样的:
<div id="slideshow" data-cycle-loader="wait"></div>
相关文章:
- 非常大的图像显示渐进
- CSS Html使图像显示在单选按钮的选项上(单选按钮被CSS隐藏)
- JS照片库.使大图像显示和缩略图可单击
- 多个图像显示带有动态创建的画布的最后一个图像并分配给图像
- 当我在jquery/javascript中单击按钮时加载图像显示
- React图像显示
- 随机图像显示,无重复,使用Javascript
- 将跨度内容(图像url)转换为图像(显示)
- 随机图像显示不止一次
- 节点.js 使用 Multer 上传图像显示未定义
- 范围滑块,用于更改轨道上方对齐圆的直径并使对齐的图像显示在下方
- 使用图像显示和隐藏
- 使用 JavaScript 将文件夹中的图库图像显示到网页中
- 画布到图像显示为无图像(空白)
- 传单不会将本地图像显示为叠加
- 切换此元素时,如何使不同的图像显示,而不是文本
- 在页面加载时将图像显示为弹出窗口
- 如何在模糊浏览器主窗口时将图像显示为叠加层
- iOS在画布上绘制图像显示:无会导致内存泄漏
- JavaScript 图像显示不起作用