Question

我尝试在加载页面上的元素后立即触发操作。我正在使用Jquery的on('load')功能来执行此操作。

然而它不起作用。这是代码和JSFiddle

console.log("Hi");
$('#complexDiv').on('load', function(){
    console.log('Header loaded');
});

HTML

</header>
<body>
  <h1>Hello!</h1>
  <div id="complexDiv">
    <h2>Some text</h2>
    <p>A paragraph</p>
    <img src="" alt="">
  </div>
</body>

Answer 1

我认为只在需要外部资源的元素上调用load事件。

来自jQuery：

当load元素和所有子元素都有时，load事件被发送到元素已完全装满。此事件可以发送到任何元素与URL相关联：图像，脚本，框架，iframe和窗口对象。

.ready（）的案例：

当JavaScript提供用于执行代码的load事件时页面呈现，此事件在所有资产之前都不会被触发如图像已被完全接收。在大多数情况下，只要DOM层次结构完全可以运行脚本构建完毕，你可以使用.ready（）。

根据您的情况，您可以监听窗口加载或更好地使用就绪，因为不推荐使用加载。

    cout << "Do you want to play hangman? (y or n): ";
    cin >> userReply;
    gameStatus = promptYN(userReply);

    while (gameStatus != STOP)
    {
        if (gameStatus == PLAY)
        {
            chances = 0;
            cout << "Let's Play\n\n";

            guessWord = getNextWord();                  // Function call (randword.h)
            guessWord = strToUpper(guessWord);          // Function call (MyFuncts.h)
            cout << "\nWord to Guess: " << guessWord << endl;
            cout << endl << h1;


            while (wrong != 6)                          // Function to find out which hangman board to print to user
            {
                cout << "\nEnter a letter to guess: ";
                cin >> gLetter;
                gLetter = toupper(gLetter);
                cout << "You entered: " << gLetter << endl << endl;

                cout << gLetter << " is NOT in the word to guess.";

                wrong++;

                if (wrong == 0)
                    cout << endl << h1 << endl;
                if (wrong == 1)
                    cout << endl << h2 << endl;
                if (wrong == 2)
                    cout << endl << h3 << endl;
                if (wrong == 3)
                    cout << endl << h4 << endl;
                if (wrong == 4)
                    cout << endl << h5 << endl;
                if (wrong == 5)
                    cout << endl << h6 << endl;
                if (wrong == 6)
                    cout << endl << h7 << endl;
            }
        }

        else if (gameStatus == STOP)
        {
            cout << "Goodbye\n";
        }

        else
        {
            cout << "Error - please enter (y or n)\n";
        }
        cout << "Do you want to play hangman? (y or n): ";
        cin >> userReply;
        gameStatus = promptYN(userReply);
    }

Answer 2

您可以animation为css元素定义#complexDiv属性，animation-duration元素设置为0s，使用animationstart附加到$(window)的事件{1}}，.one()。

注意，onanimationstart事件属性可用于chrome，chrome而不使用jQuery .one(); firefox 47无法识别onanimationstart事件attirbute。此外，@keyframes应设置animation-name css，但不需要设置属性。

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js">
  </script>
  <style>
    #complexDiv {
      animation: e 0s;
      -moz-animation: e 0s;
      -webkit-animation: e 0s;
    }        
    @keyframes e {}       
    @-moz-keyframes e {}        
    @-webkit-keyframes e {}
  </style>
  <script>
    $(window).one("animationstart", function(e) {
      alert(e.target.id + " " + e.type)
      console.log(e.target, e.type);
    })
  </script>
</head>

<body>
  <h1>Hello!</h1>
  <div id="complexDiv">
    <h2>Some text</h2>
    <p>A paragraph</p>
    <img alt="" src="" />
  </div>
</body>

</html>

plnkr http://plnkr.co/edit/70FF4AyY9URLnwgIZl68?p=preview

onLoad不适用于元素

2 个答案: