[英]How can I let a function start, only when an other function has fully started?
I have a problem. 我有个问题。 I have a fullscreen (not background! only for my intro on my onepage website.) image slide.
我有一个全屏(不是背景!仅用于我的单页网站的介绍。)图像幻灯片。 (Created with backstretch, the real jQuery code is in an other .js file.) You'll see it in the code below.
(使用backstretch创建的,真正的jQuery代码在另一个.js文件中。)您将在下面的代码中看到它。 Now I have a problem.
现在我有一个问题。 I've put text in the center over it which has the same cycle duration, so that it is changing the image at the same time as the text does.
我将文本放置在具有相同周期持续时间的中央,以便它与文本同时更改图像。 But when I upload the webpage to a server, the image is loading slower than the text.
但是,当我将网页上传到服务器时,图像的加载速度比文本加载速度慢。 The result is, that the Text cycle starts before the image slider.
结果是,文本循环在图像滑块之前开始。 Can I make a function, so that the text only starts cycling, when the image cycle has begun?
我可以设置一个功能,以便仅在图像循环开始后才开始循环文本吗? I have already tried the "unload" function, but then the image is faster than the text.
我已经尝试过“卸载”功能,但是图像比文本要快。 (It would also be okay to include a loading wheel when I open the website, so that the whole site can load.. Tell me if you don't understand what I mean)
(当我打开网站时,还可以包括一个加载轮,这样整个网站都可以加载。请告诉我您是否不明白我的意思)
<!-- Intro Header --> <header class="intro"> <!-- Backstretch JS --> <!-- <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> --> <script src="js/jquery-1.11.2.min.js" type="text/javascript"></script> <script src="js/jquery.backstretch.js"></script> <script> $.backstretch([ "images/myimage1.png", "images/myimage2.png", "images/myimage3.png", "images/myimage4.png" ], { fade: 750, //Speed of Fade duration: 5000 //Time of image display }); </script> <div class="brand-heading"> <script src="http://code.jquery.com/jquery-1.7.min.js"></script> <script> $(function () { var messages = [], index = 0; messages.push('Message 1'); messages.push('Message 2'); messages.push('Message 3'); function cycle() { $('#some-id').html(messages[index]); index++; if (index === messages.length) { index = 0; } setTimeout(cycle, 5750); } cycle(); }); </script> <div id="some-id"></div> </div> </header>
Looking at the backstretch docs, I would use backstretch.before and/or backstretch.after methods. 查看backstretch文档,我将使用backstretch.before和/或backstretch.after方法。
$(function () {
var messages = [],
messages.push('Message 1');
messages.push('Message 2');
messages.push('Message 3');
$(window).on("backstretch.after", function (e, instance, index) {
$('#some-id').html(messages[index]);
});
});
Use the properties complete and naturalWidth for checking the image is loaded. 使用complete和naturalWidth属性检查图像是否已加载。
It's quite simple. 这很简单。 Check if complete and naturalWidth is > 0: image ok.
检查complete和naturalWidth是否> 0:图像正常。
function IsImageOk(img) {
if (!img.complete) {
return false;
}
if (typeof img.naturalWidth !== "undefined" && img.naturalWidth === 0) {
return false;
}
return true;
}
Read more here: Check if an image is loaded (no errors) in JavaScript 在此处阅读更多内容: 检查是否在JavaScript中加载了图片(无错误)
As MazzCris has said (But I'll just provide clarification if you need it), use backstretch.after instead of your setTimeout(cycle, 5750);
正如MazzCris所说的(但是如果需要的话我会提供澄清),请使用backstretch.after而不是
setTimeout(cycle, 5750);
The code would be: 该代码将是:
var messages = [],
index = 0;
messages.push('Message 1');
messages.push('Message 2');
messages.push('Message 3');
function cycle() {
$('#some-id').html(messages[index]);
index++;
if (index === messages.length) {
index = 0;
}
}
$(window).on("backstretch.after", function (e, instance, index) {
cycle();
});
If you want to keep cycle()
as a callable function that is. 如果要保留
cycle()
作为可调用函数。
Side note: You can define the messages
array with the values in it, without having to use messages.push
, unless you want to do that for some reason. 旁注:您可以使用其中的值定义
messages
数组,而不必使用messages.push
,除非出于某种原因要这样做。
If that was just the way you happened to do it, you can change it to: 如果这只是您碰巧的方法,则可以将其更改为:
var messages = ['Message 1', 'Message 2', 'Message 3'],
index = 0;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.