$(document).ready()和onload() html渲染時的區別

時間 2019-12-02

標籤 document ready onload html 渲染區別欄目 HTML 简体版

原文原文鏈接

不談調用次數，加載前後問題，只看渲染時區別javascript

一、都在數據綁定完加載。css

二、ready能夠有多個，且都執行，onload雖能夠寫多個，可是隻執行最後一個。html

三、 $.ready = function () {} 和 $(document).ready()不一樣， $.ready相似於onload，多個的話只會執行最後一個，而且和$(document).ready()同是寫的話會覆蓋$(document).ready()；可是和$(document).ready()相似的是，等dom元素繪製完就執行，沒必要等全部元素（圖片）加載完。java

<!DOCTYPE html>
<html>
<head>
    <title>ready 和 onload()的區別</title>
</head>
<body>
    <p>論一我的的心胸</p>
    <img src="http://pic1.win4000.com/wallpaper/e/526c9f87129d9.jpg" />
    <img src="http://fj2.eastday.com/hdqxb2013/20130823_7/node757990/images/02347082.jpg" />
    <img src="http://pic25.nipic.com/20121210/7447430_215152474000_2.jpg" />
    <img src="http://www.ftourusa.com/uploads/allimg/120709/10-120F91156331I.jpg" />
    <img src="http://pic1.win4000.com/wallpaper/a/5822ec48466e9.jpg" />
    <img src="http://pic1.win4000.com/wallpaper/a/5822ec4e20a0d.jpg" />
    <img src="http://www.sinaimg.cn/dy/slidenews/4_img/2010_12/703_34324_811130.jpg" />
    <img src="http://www.cecet.cn/upimg/allimg/100727/1124SUQ4.jpg" />
    <img src="http://img1.cache.netease.com/catchpic/9/95/959D16A04C3C267B26A0032091AA7F70.jpg" />
    <img src="http://www.meijialx.com/images/122547_media_20071310386.jpg" />
    <img src="http://img15.3lian.com/2015/h1/21/d/28.jpg" />
    <img src="http://img1.3lian.com/2015/a1/147/d/7.jpg" />
    <img src="http://img.tuku.cn/file_thumb/201601/m2016012815305053.jpg" />
    <img src="http://pic25.nipic.com/20121210/7447430_215152474000_2.jpg" />
    <img src="http://www.ftourusa.com/uploads/allimg/120709/10-120F91156331I.jpg" />
    <img src="http://pic1.win4000.com/wallpaper/a/5822ec48466e9.jpg" />
    <img src="http://pic1.win4000.com/wallpaper/a/5822ec4e20a0d.jpg" />
    <img src="http://www.sinaimg.cn/dy/slidenews/4_img/2010_12/703_34324_811130.jpg" />
    <img src="http://www.cecet.cn/upimg/allimg/100727/1124SUQ4.jpg" />
    <img src="http://img1.cache.netease.com/catchpic/9/95/959D16A04C3C267B26A0032091AA7F70.jpg" />
    <img src="http://www.meijialx.com/images/122547_media_20071310386.jpg" />
    <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
   
  
    <script type="text/javascript">
        window.onload = function () {
            alert("我說onload函數");
        }
        $(document).ready(function () {
            alert("第一次document.ready");
        })
        $(document).ready(function () {
            alert("第二次document.ready");
        })
        $.ready = function () {
            alert("第三次加載ready函數");

        }
        $.ready = function () {
            alert("第四次加載ready函數");

        }
        window.onload = function () {
            alert("我是第二次加載onload函數");
        }
    </script>
</body>
</html>