简单的身体加载功能不会触发我的功能

Simple Body onload function not triggering my function

本文关键字：功能 我的 简单 加载      更新时间：2023-09-26

我有这个javascript函数要用body onload函数触发，但我无法让它工作。我在这里做错了什么？下面是我的小提琴和代码：

HTML:

<body onload="loading()">
    <div id="container">
    </div>
</body>

JS:

function loading(){   
  document.getElementById('container').css("background-image", "none");
}

也尝试过

function loading(){   
  document.getElementById('container').cssText = "background-image: none";
}

CSS：

body{
  background: #000;
}
#container {
width: 600px;
height: 500px;
margin:0 auto;
background-image: url("http://lamininbeauty.co.za/images/gallery/loading.png");
background-repeat: no-repeat;
background-position: 50% 50%;
}​

尝试：

function loading(){   
  document.getElementById('container').style.backgroundImage= "none";
}

您混淆了原生javascript和jQuery，原生DOM元素上没有css方法：

function loading(){   
  document.getElementById('container').style.backgroundImage = "none";
}

getElementById返回一个没有方法.css()的html元素。它的jQuery有这个方法，而且你的函数处于onload中，所以它被封装在一个函数中，你希望它不被封装。

http://jsfiddle.net/3pDsJ/35/

function loading(){   
  document.getElementById('container').style.backgroundImage = "none";
}

确保您的js已加载到页面的部分中。

或者，您只能添加

$(function() {
$('#container').css("background-image", "none");
}

在你的js中，并从主体中删除加载

我假设您使用的是jquery，否则上面的解决方案就是

问题是jsfiddle被设置为运行您定义的javascript onLoad，所以我怀疑它在定义loading()方法之前遇到了您的onload=属性。如果你打开一个控制台，你会看到一个错误"Uncaught ReferenceError:loading is not defined"（或类似的错误）。

你可以将其更改为"无包裹（头部）"，它应该可以正常工作。尽管如前所述，您需要将css方法更改为实际工作的方法。

我想说一个更简单的解决方案是只使用jquery。使用元素的onload处理程序已不再是一种好的做法（我认为它们现在实际上已经被弃用了？）。最好的解决方案是一个名为"不引人注目的javascript"的解决方案，您执行的任何js都不需要来自html代码的额外javascript或方法调用。我修改了小提琴来举一个例子：

http://jsfiddle.net/3pDsJ/38/

我还没有看到的答案是，您的脚本标记必须在您的body标记中。这是因为脚本标记必须在正文加载之前加载，否则您将收到一个错误，说明未定义加载函数。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="YourCSS.css" />
</head>
<body onload="loading()">
    <div id="container">
    </div>
    <script type="text/javascript">
        function loading(){   
            $("#container").attr("style", "background-image: none;");
        };
    </script>
</body>
</html>
相关文章：