jQuery加载事件执行时机

详细的在源码中有注释,两个文件中PHP文件只是为了演示加载机制的加载顺序。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

    <script>
        /*
        * 假设有一个广告图片,带有小叉隐藏图片功能。(即加载事件里小叉设置onclick事件)
        *
        * 用window.onload加载机制,在未加载完所有内容时,是无法点击小叉隐藏的
        * 而jQuery加载机制,因为加载快,可以做到只要图片小叉出来,就能点击关闭
        * jQuery加载机制,是对DOMContentLoaded的封装,并不是对onload加载机制的封装
        * */


        window.onload = function () {
            alert(1234); //4s之后 图片 和 弹出框 同时显示
        }

        $(function () {
           alert(3333);
        });

        //DOMContentLoaded加载事件
        document.addEventListener('DOMContentLoaded',function () {
            alert('324324324');
        })
    </script>


</head>
<body>
<h2>jQuery加载事件执行时机</h2>
<img src="./20.php" alt="">
</body>
</html>

<?php

//利用PHP绘制一个图片
//创建画板
$im = imagecreatetruecolor(300,200);

//创建颜色画笔
$pen = imagecolorallocate($im,0,200,0);

//为画板填充颜色
imagefill($im,10,10,$pen);

//模仿网速慢,延迟4秒再出来
sleep(4);

//输出图片
header("content-type:image/jpeg");
imagejpeg($im);

//销毁图片
imagedestroy($im);

评论

大侠名号:   验证码: 点击我更换图片  

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND