Question

我正在使用名为＆＃39; typed＆＃39;的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

当元素变得可见时，您想要初始化类型，不是吗？然后尝试这样的事情：

$(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()">

OR 在脚本中执行此操作

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

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

2 个答案: