关于JavaScript中的window.onload

Question

I'm taking a introduction javascript class and for one of our labs we were instructed to have only ONE script tag in the head section but gets delayed by the window.onload event handler. 我正在介绍一个javascript类，在我们的其中一个实验中，我们被指示在头部分仅包含一个 script标签，但因window.onload事件处理程序而延迟。

I got everything to work but my question is why do my imageManipulator() function only work when I do window.onload = function() { imageManipulator() }; 我可以正常工作了，但我的问题是为什么我的imageManipulator（）函数仅在执行window时才起作用。onload= function（）{imageManipulator（）}; and the other 2 works fine without the {}. 而另外两个在没有{}的情况下工作正常。

Also for my if statement to loop through the hockey teams why won't == 0 work? 同样，对于我的if语句遍历曲棍球队的原因，为什么== 0不起作用？ I thought 0 is true -1 is false so shouldn't it be == 0 and not >= 0? 我以为0是true -1是false，所以不是== 0而不是> = 0吗？

My code is here: 我的代码在这里：

<html>
<head>
<script>
    function christmasDayCalculation()
    {
        var currentDate = new Date();
        var christmas = new Date(2016, 11, 25);

        var ms = christmas - currentDate;
        var seconds = ms / 1000;
        var minutes = seconds / 60;
        var hours = minutes / 60;
        var days = hours / 24;

        alert(Math.round(days) + " days until christmas");
    }

    function hockeyTeams()
    {
        var hockeyTeams = ['Anaheim Ducks', 'Arizona Coyotes', 'Calgary Flames', 'Edmonton Oilers', 
                       'Los Angeles Kings', 'San Jose Sharks', 'Vancouver Canucks', 'Colorado Avalanch',
                       'Dallas Stars', 'Minnesota Wild', 'St.Louis Blues', 'Winnipeg Jets', 'Boston Bruins', 
                       'Buffalo Sabres', 'Detroit Redw Wings', 'Florida Panthers', 'Montreal Canadiens', 
                       'Ottowa Senators', 'Tampa Bay Lightning', 'Toronto Maple Leafs', 'Colombus Blue Jackets', 
                       'New Jersey Devils', 'New York Islanders', 'New York Rangers', 'Philadelphia Flyers', 
                       'Pittsburgh Penguins', 'Washington Capitals']

        for(i = 0; i < hockeyTeams.length; i++)
        {
            if(hockeyTeams[i].indexOf("an") >= 0)
            {
                alert(hockeyTeams[i]);
            }
        }
    }

    function imageManipulator()
    {
        var numberOfImages = document.images.length;

        for(i = 0; i < numberOfImages; i++)
        {
            document.images[i].style.border = "solid red"; // DOM 0 required per lab instructions
            document.getElementsByTagName("img")[i].style.width = "100px"; // DOM 1 required per lab instructions
        }
    }

    window.onload = christmasDayCalculation();
    window.onload = hockeyTeams();
    window.onload = function() { imageManipulator() };
</script>
</head>
<body>
    <img src="cat.jpg">
    <img src="dog.jpg">
    <img src="bird.jpg">
</body>
</html>

Thanks! 谢谢！

Answer 1

Running something in window.onload ensure that all the DOM elements will be loaded before the function runs. 在window.onload运行某些内容，以确保在函数运行之前将加载所有DOM元素。 You need to use this if the function accesses or modifies the DOM. 如果函数访问或修改DOM，则需要使用它。

christmasDayCalculation() and hockeyTeams() don't access the DOM, so they don't need to be run in window.onload . christmasDayCalculation()和hockeyTeams()不会访问DOM，因此不需要在window.onload运行。 You're not actually running them when the window is loaded, because you didn't put function() around them. 加载窗口时，实际上并没有运行它们，因为您没有在它们周围放置function() 。 When you do 当你做

window.onload = hockeyTeams();

it runs the function immediately, and then assigns the value that it returns to window.onload . 它立即运行该函数，然后将其返回的值分配给window.onload 。

When you write 当你写

window.onload = function() { imageManipulator(); };

That doesn't run imageManipulator() immediately, it creates a function that will call it. 那不会立即运行imageManipulator() ，而是会创建一个函数来调用它。 You could also write: 您还可以编写：

window.onload = imageManipulator;

Notice that there's no () after the function name. 请注意，函数名称后没有() 。 That sets the variable to a reference to the function, rather than calling the function. 这会将变量设置为对该函数的引用，而不是调用该函数。

Finally, it makes no sense to assign to window.onload multiple times. 最后，多次分配给window.onload没有意义。 This is a single property, it can only hold one value. 这是一个单一属性，只能容纳一个值。 The repeated assignments replace the previous value, and when the document is loaded it will only execute the last one. 重复的分配将替换先前的值，并且在加载文档时，它将仅执行最后一个值。 If you want to do multiple things, you should combine them into a single function: 如果要执行多项操作，则应将它们组合为一个函数：

window.onload = function() {
    christmasDayCalculation();
    hockeyTeams();
    imageManipulator();
};

For your second question, indexOf() returns the position of the found element in the array, or -1 if it's not found. 对于第二个问题， indexOf()返回找到的元素在数组中的位置；如果未找到， indexOf()返回-1 。 So if you used == 0 , it would not be true for New York Islanders , because indexOf() returns 12 , not 0 . 因此，如果您使用== 0 ，则对于New York Islanders来说将不是真的，因为indexOf()返回12而不是0 。 indexOf doesn't return a true/false value, it returns a position. indexOf不返回true / false值，它返回一个头寸。

关于JavaScript中的window.onload

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-05-06 02:45:04

关于JavaScript中的window.onload

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-05-06 02:45:04

解决方案1
1 已采纳 2016-05-06 02:45:04