7

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

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

4

7 回答 7

1

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

资料来源：window.onload 与 $(document).ready()

于 2012-12-28T03:26:25.867 回答
0

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

将 JavaScript 放在标签之前的页面底部也是最佳实践，以确保首先完全加载所有元素。

$(document).ready(function(){
    // now do your actions
});
于 2013-01-15T09:23:15.150 回答
0

你需要像下面这样的东西。此函数在 DOM 加载后立即执行，但不是整个页面。页面加载和 DOM 加载之间有很多区别。

$(document).ready(
                 function(){
                            alert('DOM is now loaded and can be manipulated .');
                           }
                 );
于 2013-01-06T17:01:31.400 回答
0

这将是使用 JS onload 和首先加载所有 CSS 的组合。如果在加载任何脚本之前加载所有 CSS，则可以保证加载所有 CSS；在加载时结合 JS，你会得到你想要的。

于 2013-01-07T22:00:07.897 回答
0

如果你不能使用$(document).ready技术，你可以把你的脚本代码放在 body 标签关闭之前。

<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>");
        }
    });
于 2013-02-10T23:09:52.443 回答
0

这里的人们发布了许多使用jQuery 的 DOM 就绪功能的示例——但他们没有提及或演示为了使用它，您需要包含 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 的文档.ready()有这样的说法：

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

我为您突出显示了文档中的引用，因为您提到您希望首先加载 CSS。从表面上看，你只需要确保你的<link rel="stylesheet" href="style.css" />标签放在你的 jQuery 代码上面<head>的部分:)

快乐编码！//追赶

jQuery.com

于 2013-02-04T19:43:40.770 回答
0

除非您使用 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.");
});
于 2012-12-28T03:30:32.907 回答