jQuery - อะไรคือความแตกต่างระหว่าง $ (เอกสาร). Ready และ $ (หน้าต่าง). load?

319

อะไรคือความแตกต่างระหว่าง

$(document).ready(function(){
 //my code here
});

และ

$(window).load(function(){
  //my code here
});

และฉันต้องการให้แน่ใจว่า:

$(document).ready(function(){

})

และ

$(function(){

});

และ

jQuery(document).ready(function(){

});

เหมือนกัน.

คุณช่วยบอกฉันได้ไหมว่าความแตกต่างและความคล้ายคลึงระหว่างพวกเขาเป็นอย่างไร

jquery

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

11

เป็นไปได้ที่ซ้ำกันของwindow.onload เทียบกับ document.ready

— Pranay Rana

1

lolz เขาคัดลอกมาจากลิงค์เดียวกันหลังจากฉัน (โดยไม่เอ่ยถึง) และได้รับการยอมรับ: บทเรียน P เรียนรู้ไม่อธิบายให้นักพัฒนาพวกเขาชอบที่จะเห็นรหัสแทน: D

— Rifat

@Rifat ฉันขอโทษ แต่รูปแบบของ Oyeme อ่านง่ายกว่า> _ <

— hungneox

1

@eureka ไม่เป็นไร คุณไม่ต้องเสียใจด้วย :) เราทั้งคู่พยายามช่วยคุณ แต่เขาควรจะกล่าวถึงเครดิต: P

— Rifat

เป็นไปได้ซ้ำของwindow.onload vs. body.onload vs. document.onready

— vault

432

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


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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

ขยายตัวอย่างข้อมูล

รุ่น Query 3.0

ทำลายการเปลี่ยนแปลง:. load (), .unload () และ .error () ถูกลบแล้ว

วิธีการเหล่านี้เป็นทางลัดสำหรับการดำเนินกิจกรรม แต่มีข้อ จำกัด API หลายประการ .load()เมธอดเหตุการณ์ขัดแย้งกับ.load() เมธอดajax .error()วิธีการไม่สามารถใช้กับwindow.onerror เนื่องจากวิธีการวิธีการ DOM มีการกำหนด หากคุณต้องการที่จะแนบเหตุการณ์ตามชื่อเหล่านี้ใช้.on()วิธีการเช่นการเปลี่ยนแปลง ไป$("img").load(fn) ¹$(img).on("load", fn)

$(window).load(function() {});

ควรเปลี่ยนเป็น

$(window).on('load', function (e) {})

สิ่งเหล่านี้เทียบเท่ากันทั้งหมด:

$(function(){
}); 

jQuery(document).ready(function(){
});

$(document).ready(function(){
});

$(document).on('ready', function(){
})

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

25

ชี้ไปที่โพสต์ดั้งเดิม

— Pranay Rana

ส่วนหลังเป็นที่นิยมมากกว่าเนื่องจากตัวอื่นถูกคัดค้าน นอกจากนี้หลัง (ฉันเชื่อว่า) อนุญาตให้มีตัวจัดการหลายตัวโดยเฉพาะเพื่อให้คุณสามารถมีสคริปต์หลายตัวล้วนมีตัวจัดการ. on ('พร้อม' ... )

— Evan Langlois

6

.on( "ready", handler )- เลิกใช้ตั้งแต่ jQuery 1.8 ดูapi.jquery.com/ready

— TeNNoX

ความแตกต่างระหว่าง$(document).readyและ$(document).loadคืออะไร

— renatov

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

— pazof

29

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

อ่านคำถามที่เกี่ยวข้องด้วย:
ความแตกต่างระหว่างฟังก์ชัน $ (หน้าต่าง) .load () และ $ (เอกสาร). ready ()

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

11

จากเอกสาร jQuery API

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

ในกรณีที่รหัสขึ้นอยู่กับสินทรัพย์ที่โหลด (ตัวอย่างเช่นหากต้องการขนาดของภาพ) ควรวางรหัสไว้ในตัวจัดการสำหรับloadเหตุการณ์แทน

ตอบคำถามที่สอง -

ไม่พวกเขาเหมือนกันตราบใดที่คุณไม่ได้ใช้ jQuery ในโหมดไม่ขัดแย้ง

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

10

สามฟังก์ชันนี้เหมือนกัน

$(document).ready(function(){

})

และ

$(function(){

});

และ

jQuery(document).ready(function(){

});

ที่นี่$จะใช้สำหรับการกำหนดjQueryเช่น=$jQuery

ตอนนี้ความแตกต่างก็คือ

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

$(window).load เหตุการณ์ถูกไล่ออกหลังจากโหลดเนื้อหาทั้งหมดเช่นหน้ามีภาพ, CSS และอื่น ๆ

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

5

ความแตกต่างระหว่าง$(document).ready()และ$(window).load()ฟังก์ชั่นคือรหัสที่รวมอยู่ภายใน$(window).load()จะทำงานทันทีที่โหลดหน้าทั้งหมด (รูปภาพ, iframes, stylesheets ฯลฯ ) ในขณะที่เอกสารพร้อมใช้งานเหตุการณ์จะเริ่มก่อนที่จะโหลดรูปภาพทั้งหมดทั้งหมด iframes เป็นต้น แต่หลังจาก DOM ทั้งหมดแล้ว พร้อมแล้ว

$(document).ready(function(){

})

และ

$(function(){

});

และ

jQuery(document).ready(function(){

});

ไม่มีความแตกต่างระหว่าง 3 รหัสข้างต้น

พวกเขาจะเทียบเท่า แต่คุณอาจต้องเผชิญกับความขัดแย้งถ้ากรอบ JavaScript อื่น ๆ ที่ใช้สัญลักษณ์เดียวกันเงินดอลลาร์$เป็นชื่อทางลัด

jQuery.noConflict();
jQuery.ready(function($){
 //Code using $ as alias to jQuery
});

— Shubham Kumar
แหล่งที่มา

ความแตกต่างระหว่าง jQuery (document) .ready (function () {และ jQuery (document). ready (function ($) {? หมายเหตุ $ ภายในวงเล็บ

— MarcoZen

3

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

— Kumar Immanuel
แหล่งที่มา

2

$(document).ready(function(e) { 
    // executes when HTML-Document is loaded and DOM is ready  
    console.log("page is loading now"); 
});

$(document).load(function(e) { 
    //when html page complete loaded
    console.log("completely loaded"); 
});

— Pavan Hukerikar
แหล่งที่มา

2

โปรดอธิบายคำตอบของคุณด้วย

— BlackBeard

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 ()

$(document).ready(function(){

}) 
//and 
$(function(){

}); 
//and
jQuery(document).ready(function(){

});

ด้านบน 3 เหมือนกัน $ คือชื่อนามแฝงของ jQuery คุณอาจพบข้อขัดแย้งหากเฟรมเวิร์ก JavaScript อื่นใดใช้สัญลักษณ์ดอลลาร์ $ เดียวกัน หากคุณเผชิญกับความขัดแย้งทีม jQuery ให้บริการโซลูชั่นที่ไม่มีความขัดแย้งอ่านเพิ่มเติม

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

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