บางครั้งในงานพัฒนาส่วนหน้าเพื่อให้ได้ข้อมูลภาพเราจำเป็นต้องได้รับขนาดและขนาดของภาพอย่างถูกต้องหลังจากโหลดภาพและดำเนินการฟังก์ชั่นการโทรกลับที่สอดคล้องกันเพื่อให้ภาพสร้างเอฟเฟกต์การแสดงผลบางอย่าง บทความนี้ส่วนใหญ่จัดระเบียบวิธีการทั่วไปหลายประการสำหรับการตัดสินความสมบูรณ์ของการโหลดภาพและอธิบายและอธิบายผ่านการรวมกันของรหัสและแอปพลิเคชันที่ใช้งานได้จริง
วิธีการโหลด
เรียกใช้รหัส Javascipt ที่ตามมาโดยการเพิ่มแอตทริบิวต์ ONLOAD ลงในแท็ก IMG และเติมในฟังก์ชั่นที่เกี่ยวข้อง ในตัวอย่างโค้ดต่อไปนี้องค์ประกอบ IMG จะไม่ปรากฏขึ้นตามค่าเริ่มต้น มันถูกกำหนดโดย OnLoad ว่าภาพจะปรากฏขึ้นหลังจากโหลดเสร็จสมบูรณ์
การคัดลอกรหัสมีดังนี้:
<img onload = "รับ (นี้)" src = "... " style = 'display: none' />
<script type = "text/javascript">
ฟังก์ชั่นรับ (ts) {
ts.style.display = 'block'; // แสดงรูปภาพ
-
</script>
ข้อดี: ส่วนรหัส JavaScript สามารถวางไว้ในส่วนใดส่วนหนึ่งของหน้าเพื่อโหลดและสามารถใช้กับภาพโดยพลการส่วนใหญ่ ใช้งานง่ายและเข้าใจง่าย
ข้อเสีย: แอตทริบิวต์ onlaod จะต้องโพสต์ในแต่ละแท็กซึ่งไม่สามารถใช้ได้ในบางกรณีที่รหัส HTML ไม่สามารถจัดการได้โดยตรงหรือหากรหัสจำเป็นต้องง่ายขึ้น
วิธีการของ Javascipt
เลือกรูปภาพด้วย ID ที่ระบุระบุวิธีการโทรกลับผ่าน OnLoad และพรอมต์พร้อมคำว่า "การโหลดภาพเสร็จสมบูรณ์" จะปรากฏขึ้นหลังจากโหลดรูปภาพ
การคัดลอกรหัสมีดังนี้:
<img id = "pic1" src = "... " />
<ภาษาสคริปต์ = "JavaScript">
document.getElementById ("pic1"). onload = function () {
การแจ้งเตือน ("การโหลดภาพเสร็จสมบูรณ์");
-
</script>
ข้อดี: ง่ายและใช้งานง่ายโดยไม่ส่งผลกระทบต่อรหัส HTML
ข้อเสีย: สามารถระบุองค์ประกอบเดียวเท่านั้นและรหัส javascipt จะต้องวางไว้ด้านล่างองค์ประกอบภาพ
วิธี jQuery
สำหรับแต่ละเหตุการณ์การเชื่อมโยงองค์ประกอบภาพด้วยคลาส PIC1 องค์ประกอบจะค่อยๆปรากฏขึ้นผ่านวิธีโหลดของ jQuery
โปรดทราบว่าอย่าผูกเหตุการณ์โหลดใน $ (เอกสาร) .ready ()
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
$ (function () {
$ ('. pic1'). แต่ละ (ฟังก์ชั่น () {
$ (นี่) .load (function () {
$ (นี่) .fadein ();
-
-
-
</script>
ข้อดี: เหตุการณ์องค์ประกอบสามารถผูกมัดเป็นแบทช์และไม่ส่งผลกระทบต่อเนื้อหารหัส HTML
ข้อเสีย: จำเป็นต้องมีการสนับสนุนของไลบรารี jQuery และรหัสจะต้องวางไว้ด้านล่างองค์ประกอบที่ต้องดำเนินการ