Question

我想在dom和css准备就绪时执行一些javascript，但我不关心图像（我倾向于懒惰加载图像）

我知道如何检测dom就绪状态，但是如何检测css已准备就绪？

Answer 1

您应该使用document.ready事件。所有图像和其他图像完全加载后window.onLoad会触发。

Answer 2

除非您使用javascript明确加载css文件，否则javascript无法判断您的.css文件是否已加载。我将如何做后者：

function dynamicallyLoadCss(fileName,callBackFunc){
    var fileRef=document.createElement("link");
    fileRef.setAttribute("rel", "stylesheet");
    fileRef.setAttribute("type", "text/css");
    fileRef.setAttribute("href", filename);

    if(callBackFunc) {
        callBackFunc();
    }
}
//Call the function like so...
dynamicallyLoadCss("mystyles.css", function() {
    console.log("Our hamsters have finished loading your mystyles.css file.");
});

Answer 3

您需要以下内容。一旦加载DOM而不是整个页面，该函数就会执行。页面加载和DOM加载之间存在很大差异。

$(document).ready(
                 function(){
                            alert('DOM is now loaded and can be manipulated .');
                           }
                 );

Answer 4

这将是使用JS onload和首先加载所有CSS的组合。如果在加载任何脚本之前加载所有CSS，则可以保证加载所有CSS;在加载时与JS结合，您将获得所需的内容。

Answer 5

在页面标题中以及任何JavaScript之前上传所有CSS。

最佳做法是在标记之前将JavaScript放在页面底部，以确保首先完全加载所有元素。

$(document).ready(function(){
    // now do your actions
});

Answer 6

这里的人们发布了很多使用jQuery's DOM ready feature的例子 - 但他们没有提及或证明为了使用它你需要包含jQuery。

你可以使用直接的JavaScript来完成你想要的东西 - 但是这个技术因浏览器的不同而不同，jQuery总是能很好地为你量身定制这些差异 - 我个人就是一个jQuery人。可能永远是：）

在HTML文档<head>的末尾，包含jQuery库，然后包含您的代码：）

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    $(function(){
        console.log("DOM is Ready! Images haven't finished loading yet!");
    });
</script>

使用jQuery的.ready()函数有多种形式。就个人而言，我喜欢上述方法。下面这两个似乎是最正式的宽恕。

$(document).ready(function(){  console.log("DOM Ready!");  });

$(function(){  console.log("DOM Ready!");  });

jQuery's Documentation on .ready()有这样的说法：

虽然JavaScript在呈现页面时提供了用于执行代码的加载事件，但在完全接收到所有资产（如图像）之前，不会触发此事件。在大多数情况下，只要完全构造DOM层次结构，就可以运行脚本。传递给.ready（）的处理程序保证在DOM准备好后执行，因此这通常是附加所有其他事件处理程序并运行其他jQuery代码的最佳位置。 使用依赖于CSS样式属性值的脚本时，在引用脚本之前引用外部样式表或嵌入样式元素非常重要。

我强调了来自文档的引用，正如您提到的那样，您希望首先加载CSS。根据事物的外观，您只需确保将<link rel="stylesheet" href="style.css" />标记放置在您的jQuery代码的<{1}}部分上面：）

快乐的编码！ //大通

jQuery.com

Answer 7

如果您无法使用 $（document）.ready 技术，则可以在正文标记关闭之前放置脚本代码。

<body>
html code....
....
<script>
var executeAfterDOMReady;
....
</script>
</body>

对于CSS，你可以通过jQuery调用你的CSS文件：

$("<link/>", { rel: "stylesheet", type: "text/css", href: "your.css"}).appendTo("head");

甚至可以进行Ajax调用：

$.ajax({
    url:"your.css",
    dataType:"script",
    success:function(data){
        $("head").append("<style>" + data + "</style>");
        }
    });

如何在dom和css准备好但不是图像时让javascript执行

7 个答案: