Javascript 如何防止后拉伸中第一个图像的显示延迟
下面的Backstretch脚本用于显示带有标题的淡入淡出的随机图像。 但是,第一个图像和标题仅在页面加载后延迟5秒后出现, 或者在“setInterval(loadRandomImage,5000,images);”中设置的任何时间,就好像它是“setTimeout” 请让我知道我做错了什么,或者应该添加以防止第一个图像显示延迟Javascript 如何防止后拉伸中第一个图像的显示延迟,javascript,Javascript,下面的Backstretch脚本用于显示带有标题的淡入淡出的随机图像。 但是,第一个图像和标题仅在页面加载后延迟5秒后出现, 或者在“setInterval(loadRandomImage,5000,images);”中设置的任何时间,就好像它是“setTimeout” 请让我知道我做错了什么,或者应该添加以防止第一个图像显示延迟 <script src="/js/jquery-1.7.2.min.js"></script> <script src="/js/j
<script src="/js/jquery-1.7.2.min.js"></script>
<script src="/js/jquery.backstretch.js"></script>
<script src="/js/jquery.backstretch.captionjs"></script>
<script>
// Preload
$(images).each(function(){
$("<img/>")[0].src = this.url;});
var images = new Array(); //array of imgs objects
images[0] = {url: "/images/backgrounds/l&h.jpg", caption: "Stan Laurel and Oliver Hardy"};
images[1] = {url: "/images/backgrounds/sherlock-watson.jpg", caption: "Basil Rathbone and Nigel Bruce"};
images[2] = {url: "/images/backgrounds/powell-loy.jpg", caption: "William Powell and Myrna Loy"};
images[3] = {url: "/images/backgrounds/conried-bergman-bogart.jpg", caption: "Paul Heinreid, Ingrid Bergman and Humphrey Bogart"};
function loadRandomImage(imgs) {
var index = Math.floor(Math.random() * imgs.length);
console.log("loadRandomImages(): index = "+ index);
$.backstretch(imgs[index].url, {fade: 1500, speed: 5000});
$("#caption").html(imgs[index].caption);
}
// Change images every 5 seconds
setInterval(loadRandomImage, 5000, images);
</script>
<div id="caption"></div>
//预载
$(图像)。每个(函数(){
$("
您可以在页面加载时调用loadRandomImage
函数一次,然后让间隔完成其余部分
//预加载
$(图像)。每个(函数(){
$("
感谢您的回复Nicolas。在页面加载时调用“loadRandomImage”功能只能防止加载第一张图像时出现延迟。但是,标题不会出现在第一张图像上。如何防止第一张标题出现5秒延迟?更新,@Nicolas:在页面加载时调用“loadRandomImage”功能可以完美地工作y以在页面加载时立即加载图像和标题。当我将“”移到标记附近时,我意识到了这一点。再次感谢-您解决了它。现在的脚本中,图像已经淡入,但我无法使标题淡入。如何才能做到这一点?