Fatal编程技术网
  • javascript/
  • 如何让javascript在dom和css就绪而不是映像就绪时执行

如何让javascript在dom和css就绪而不是映像就绪时执行

javascript

如何让javascript在dom和css就绪而不是映像就绪时执行,javascript,domready,Javascript,Domready,我想在dom和css就绪时执行一些javascript， 但我不在乎图像（我倾向于懒散地加载图像） 我知道如何检测dom就绪状态，但如何检测css就绪？您应该使用document.ready事件窗口。onLoad在所有图像和其他图像都已完全加载时激发 来源：除非显式使用javascript加载css文件，否则javascript无法判断是否加载了.css文件。以下是我将如何做后者： function dynamicallyLoadCss(fileName,callBackFunc){ v

我想在dom和css就绪时执行一些javascript， 但我不在乎图像（我倾向于懒散地加载图像）

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

您应该使用
document.ready
事件<代码>窗口。onLoad在所有图像和其他图像都已完全加载时激发

来源：

除非显式使用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.");
});
你需要像下面这样的东西。此函数在加载DOM后立即执行，但不会加载整个页面。页面加载和DOM加载之间有很大的区别

$(document).ready(
                 function(){
                            alert('DOM is now loaded and can be manipulated .');
                           }
                 );
这将是使用JS onload和首先在顶部加载所有CSS的组合。如果在加载任何脚本之前加载所有CSS，则保证加载所有CSS；在加载时与JS结合，您将得到您想要的

上传页面标题中的所有CSS，然后再上传任何JavaScript

最好的做法是将JavaScript放在页面底部的标签前面，以确保所有元素都首先被完全加载

$(document).ready(function(){
    // now do your actions
});
这里的人发布了许多使用的示例，但他们没有提到或演示为了使用它，您需要包括jQuery

您可以使用直接的JavaScript来完成您想要的任务——但是不同浏览器的技术不同，而jQuery在规范化这些差异方面总是做得很好——就我个人而言，我是一个jQuery人。可能永远都是：）

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

我为您强调了文档中的引用，因为您提到希望首先加载CSS。从外观上看，您只需确保您的
标记放置在jQuery代码上方的
部分）

快乐编码//追逐

如果您不能使用$（document）.ready技术，您可以在body标记关闭之前将脚本代码放在正确的位置

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


html代码。。。。
....
var executeAfterDOMReady；
....
至于CSS，您可以通过jQuery调用您的CSS文件：

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

$（“”，{rel:“样式表”，键入：“text/css”，href:“your.css”}）；
甚至可以进行Ajax调用：

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

$.ajax({
url:“你的.css”，
数据类型：“脚本”，
成功：功能（数据）{
$（“head”）。追加（“+data+”）；
}
});
在您完成标准javascript处理后，使用javascrpt修改dom以显示您的图像是一个选项吗？@Kafuka:不，我想我的图像就在那里，等待lazyload。不需要使用javascipt来修改我如何知道动态插入的css文件已下载完成？一旦dynamicallyLocadCss函数运行，您的css应该被加载。我将编辑该函数，使其也具有回调。 
$.ajax({
    url:"your.css",
    dataType:"script",
    success:function(data){
        $("head").append("<style>" + data + "</style>");
        }
    });