jQuery和js的执行时机比较

69 阅读 0 评论 46 点赞

我是靠谱客的博主善良电脑，最近开发中收集的这篇文章主要介绍jQuery和js的执行时机比较，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>

</head>
<body>
    <img src="imgs/01.jpg" alt=""/>
    <img src="imgs/02.jpg" alt=""/>
    <img src="imgs/03.jpg" alt="" id="img3"/>
</body>

</html>


<script type="text/javascript">
    // window.onload = function(){
    //     // alert($("#img3").width());
    //     alert(document.getElementsByTagName("img")[2].clientWidth);
    // };

    $(function () {
        alert(document.getElementsByTagName("img")[2].clientWidth);
        //alert($("#img3").width());
    });

</script>

结论是：

js的window.onload是在htm的所有内容都加载完毕，包括外部的图片资源加载完毕，才去执行js的代码

而jQuery只是等到html的所有标签加载完毕后就去执行jQuery的入口函数中的内容，所以感觉外部资源有延迟。

效果是：JS是先显示图片在alert，而jQuery的是先alert 在显示图片