ความแตกต่างระหว่างฟังก์ชั่น $ (หน้าต่าง) .load () และ $ (เอกสาร). ready ()

216

อะไรคือความแตกต่างระหว่าง$(window).load(function() {})และ$(document).ready(function() {})ใน jQuery

jquery

266

document.readyเป็นเหตุการณ์ที่ jQuery จะทำงานเมื่อ DOM พร้อมเช่นทุกองค์ประกอบจะมีที่จะพบ / ใช้ แต่ไม่จำเป็นต้องทุกเนื้อหา
window.onloadไฟในภายหลัง (หรือในเวลาเดียวกันในกรณีที่แย่ที่สุด / ล้มเหลว) เมื่อโหลดรูปภาพและรูปภาพดังนั้นหากคุณใช้ขนาดภาพเช่นคุณมักจะต้องการใช้ภาพนี้แทน

— Nick Craver
แหล่งที่มา

38

shorthand for $(document).ready(function(){})is $(function(){})และความแตกต่างที่สำคัญอีกอย่างหนึ่งจาก window.load คือมันจะทำงานในการเรียกใช้ฟังก์ชันในอนาคตทั้งหมดแม้กระทั่งหลังจาก DOMready เริ่มต้น

— Michael Butler

2

@dbliss ใช่ผมเชื่อว่า onload $(window).on('load')คือชวเลข ทั้งที่อ้างถึงเหตุการณ์โหลด

— Lancer ฟรี

5

@MichaelButler - คุณหมายถึงit will run on ALL future calls of the functionอะไร?

— BornToCode

7

@MichaelButler: คุณต้องชัดเจนยิ่งขึ้นในความคิดเห็นของคุณ 1) คุณกำลังพูดถึง USER ดำเนินการ$(document).readyรหัสเพิ่มเติมหลังจากที่ DOM พร้อม นี่เป็นกรณีการใช้งานขนาดเล็กที่อาจไม่คุ้มค่าที่จะทำให้ทุกคนสับสนเมื่อพูดถึงมัน 2) สภาพแวดล้อมจะเรียกเพียง$(document).ready(f‌unction(){})ครั้งเดียวเมื่อ DOM พร้อม หากผู้ใช้ดำเนินการเพิ่มเติม$(document).readyหลังจากที่ DOM พร้อมใช้งานด้วยเหตุผลบางประการผู้ใช้จะถูกดำเนินการทันที

— Doug S

4

ฉันขอแตกต่างไมเคิล ลองทิ้งไว้ที่นี่และไม่ลดความคิดเห็นที่ไร้ประโยชน์ อย่างน้อยตอนนี้คนที่สับสนก็มีคำตอบ

— Doug S

73

$(document).ready(function() {
 // executes when HTML-Document is loaded and DOM is ready
 alert("document is ready");
});


$(window).load(function() {
 // executes when complete page is fully loaded, including all frames, objects and images
 alert("window is loaded");
});

— SagarPPanchal
แหล่งที่มา

22

$(window).load()ไม่สามารถใช้ได้ใน jQuery 3.0

$( window ).load(function() {
        // Handler for .load() called.
});

หากต้องการรับรอบคุณสามารถใช้เป็น "สิ่งที่แนบมาจัดการเหตุการณ์"

$( window ).on("load", function() {
        // Handler for .load() called.
});

— Kean Amaral
แหล่งที่มา

14

ความแตกต่างคือ:

$(document).ready(function() { เป็นเหตุการณ์ jQuery ที่เริ่มทำงานเมื่อโหลด DOM ดังนั้นจึงเรียกใช้งานเมื่อโครงสร้างเอกสารพร้อมใช้งาน

$(window).load() เหตุการณ์เริ่มทำงานหลังจากโหลดเนื้อหาทั้งหมดแล้ว

— Bharat Chodvadiya
แหล่งที่มา

9

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $( document ).ready(function() {
        alert( "document loaded" );
    });

    $( window ).load(function() {
        alert( "window loaded" );
    });
    </script>
</head>
<body>
    <iframe src="http://stackoverflow.com"></iframe>
</body>
</html>

window.load จะถูกเรียกใช้หลังจากที่โหลดเนื้อหา iframe ทั้งหมด

— Shaik Rasool
แหล่งที่มา

7

$(document).ready เกิดขึ้นเมื่อองค์ประกอบทั้งหมดมีอยู่ใน DOM แต่ไม่จำเป็นต้องมีเนื้อหาทั้งหมด

$(document).ready(function() {
    alert("document is ready");
});

window.onloadหรือ$(window).load()เกิดขึ้นหลังจากโหลดทรัพยากรเนื้อหา (รูปภาพและอื่น ๆ ) ทั้งหมดแล้ว

$(window).load(function() {
    alert("window is loaded");
});

— Purvik Dhorajiya
แหล่งที่มา

2

จาก jquery ที่คาดหวัง - เป็นเพียงการเพิ่มload/onloadเหตุการณ์ไปที่หน้าต่างและเอกสาร ลองดู:

window.onload เทียบกับ document.onload

— fantactuka
แหล่งที่มา

0

document.ready (jQuery) document.ready จะดำเนินการทันทีหลังจากเอกสาร HTML ถูกโหลดคุณสมบัติและ DOM พร้อมแล้ว

DOM: Document Object Model (DOM) เป็นรูปแบบข้ามแพลตฟอร์มและภาษาที่ไม่ขึ้นอยู่กับการแสดงและโต้ตอบกับวัตถุในเอกสาร HTML, XHTML และ XML

$(document).ready(function()
{
   // executes when HTML-Document is loaded and DOM is ready
   alert("(document).ready was called - document is ready!");
});

window.load (JavaScript ในตัว) อย่างไรก็ตาม window.load จะรอให้หน้าโหลดเต็มซึ่งรวมถึงเฟรมภายในรูปภาพและอื่น ๆ * window.load เป็นวิธี JavaScript ที่ติดตั้งมาในตัว นิสัยใจคอในเบราว์เซอร์เก่า (IE6, IE8, FF รุ่นเก่าและ Opera) แต่โดยทั่วไปแล้วจะใช้งานได้ทั้งหมด

window.load สามารถใช้ในเหตุการณ์ onload ของร่างกายเช่นนี้ (แต่ฉันขอแนะนำอย่างยิ่งให้คุณหลีกเลี่ยงการผสมรหัสเช่นนี้ใน HTML เนื่องจากเป็นแหล่งที่มาของความสับสนในภายหลัง):

$(window).load(function() 
{
   // executes when complete page is fully loaded, including all frames, objects and images
   alert("(window).load was called - window is loaded!");
});

— อรุณกุมาร
แหล่งที่มา

0

$ (หน้าต่าง) .loadเป็นเหตุการณ์ที่เกิดขึ้นเมื่อ DOM และเนื้อหาทั้งหมด (ทุกอย่าง) บนหน้าถูกโหลดเช่น CSS, รูปภาพและเฟรม ตัวอย่างที่ดีที่สุดคือถ้าเราต้องการได้ขนาดภาพที่แท้จริงหรือเพื่อรับรายละเอียดของสิ่งที่เราใช้

$ (เอกสาร) .ready ()ระบุว่ารหัสนั้นจะต้องถูกเรียกใช้งานเมื่อโหลด DOM แล้วและพร้อมที่จะจัดการโดยสคริปต์ มันจะไม่รอให้โหลดอิมเมจสำหรับเรียกใช้งานสคริปต์ jQuery

<script type = "text/javascript">
    //$(window).load was deprecated in 1.8, and removed in jquery 3.0
    // $(window).load(function() {
    //     alert("$(window).load fired");
    // });

    $(document).ready(function() {
        alert("$(document).ready fired");
    });
</script>

$ (หน้าต่าง). โหลดเริ่มทำงานหลังจาก $ (เอกสาร) .ready ()

$ (หน้าต่าง) .load ถูกคัดค้านใน 1.8 และถูกลบออกใน jquery 3.0

— Srikrushna
แหล่งที่มา

0

ฉันคิดว่า$(window).loadเหตุการณ์ไม่ได้รับการสนับสนุนโดย JQuery 3.x

— user8816619
แหล่งที่มา

1

ตามเอกสารประกอบเหตุการณ์ $. หน้าต่าง (หน้าต่าง) ถูกลบใน JQuery 3.0

— Mathieu VIALES

1

สิ่งนี้ถูกต้อง เพื่อให้สามารถใช้งานได้คุณสามารถใช้มันเป็น "Event Handler Attachment": $ (หน้าต่าง) .on ("load", function () {// Handler for .load () ถูกเรียก.});

— Kean Amaral

0

ตาม DOM Level 2 เหตุการณ์ที่loadเหตุการณ์ควรจะยิงไม่ได้อยู่ในdocument windowอย่างไรก็ตามloadมีการใช้งานwindowในทุกเบราว์เซอร์เพื่อความเข้ากันได้

— Jones Agyemang
แหล่งที่มา