暂停代码，直到它在浏览器窗口中

Question

我正在使用一个名为“typed”的 jquery 插件，它一个接一个地输入句子。 这很好，但我想知道是否可以暂停代码，直到文本区域在浏览器窗口中可见？

因为我希望人们能够看到输入的第一句话，但目前您会错过第一句话，因为它在页面顶部不可见。

这是我正在处理的页面：http://jakdesign.webflow.com/

这是html头部的代码：

$(document).ready(function( $ ) {
    $("#hero-text").typed({
        strings: ["First sentence.", "Second sentence."],
        typeSpeed: 0
    });
});

这是插件： https://rawgithub.com/morr/jquery.appear/master/jquery.appear.js

Answer 1

您想在元素可见时初始化 typed ，不是吗？然后尝试这样的事情：

$(document).ready(function( $ ) {
    $("#hero-text").one("appear", function() {
        $(this).typed({
            strings: ["First sentence.", "Second sentence."],
            typeSpeed: 0
        });
    });
});

当然，这需要jQuery.appear插件。

Answer 2

document ready 在 DOM 加载时被触发，因此所有小部件属性都没有被完全检索到。

window onload 等待页面中的资产完全加载 - 因此标签的信息和属性完全可用。

所以这对你有用：

function typed() {
    $("#hero-text").typed({
        strings: ["First sentence.", "Second sentence."],
        typeSpeed: 0
    });
}

    <body onload="typed()">

或 在脚本中这样做

window.onload = function(){
    $("#hero-text").typed({
            strings: ["First sentence.", "Second sentence."],
            typeSpeed: 0
        });
}