Question

我有问题。我有一个全屏（不是背景！仅适用于我的onepage网站上的介绍。）图片幻灯片。（使用backstretch创建，真正的jQuery代码在另一个.js文件中。）您将在下面的代码中看到它。现在我有一个问题。我把文本放在它上面的中心，它具有相同的循环持续时间，因此它会在文本的同时更改图像。但是当我将网页上传到服务器时，图像的加载速度比文本慢。结果是，文本循环在图像滑块之前开始。我可以创建一个函数，以便文本只在图像周期开始时才开始循环吗？我已经尝试过＆＃34;卸载＆＃34;功能，但然后图像比文本更快。（当我打开网站时，也可以包含一个加载轮，这样整个网站就可以加载..告诉我，如果你不明白我的意思）

＆＃13;

public void Foo()

＆＃13;

Answer 1

查看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]);
    });
});

Answer 2

使用属性complete和naturalWidth检查图像是否已加载。

这很简单。检查完整和自然宽度是否> 0：图片确定。

function IsImageOk(img) {

   if (!img.complete) {
      return false;
   }

   if (typeof img.naturalWidth !== "undefined" && img.naturalWidth === 0) {
      return false;
   }

   return true;
}

在此处阅读更多内容：Check if an image is loaded (no errors) in JavaScript

Answer 3

正如MazzCris所说（但如果您需要，我会提供澄清），请使用backstretch.after代替setTimeout(cycle, 5750);

代码如下：

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();
});

如果你想将cycle()保留为可调用函数，那就是。

附注：您可以使用其中的值定义messages数组，而不必使用messages.push，除非您出于某种原因想要这样做。

如果那是您碰巧的方式，您可以将其更改为：

var messages = ['Message 1', 'Message 2', 'Message 3'],
    index = 0;

只有当其他功能完全启动时，如何让函数启动？

3 个答案: