บทความนี้อธิบายวิธีการรับรู้การโหลดล่าช้าของภาพใน JavaScript ดั้งเดิม การโหลดภาพที่ล่าช้าจริง ๆ แล้วมีปลั๊กอิน jQuery และวิธีการโหลดนั้นง่ายมากและสมเหตุสมผล อย่างไรก็ตามเพื่อนบางคนคิดว่าการโหลดแพ็คเกจปลั๊กอิน jQuery นั้นใหญ่เกินไปดังนั้นฉันจึงเขียนด้วยตัวเองเพื่อแบ่งปันกับคุณ
ก่อนอื่นการโหลดล่าช้าของรูปภาพสามารถช่วยเราแบนด์วิดท์และได้รับประสบการณ์การใช้งานที่ดีขึ้นโดยเฉพาะอย่างยิ่งสำหรับเว็บไซต์ที่มีรูปภาพมากมายซึ่งเป็นสิ่งสำคัญ ให้ฉันหารือเกี่ยวกับหลักการและรหัสการใช้งานของการหน่วงเวลาการโหลดของภาพกับคุณด้านล่าง
การโหลดความล่าช้าของรูปภาพหลักการ
หลักการของการโหลดล่าช้าของภาพคือภาพ SRC ใน HTML ไม่ได้ถูกเติมในที่อยู่ภาพจริง แต่ที่อยู่รูปภาพถูกกำหนดให้กับแท็ก IMG ด้วยแอตทริบิวต์ที่กำหนดเองเช่น: SRC =” IMG/LOADING.GIF” Data-URL =” IMG/1.JPG” เมื่อถึงจุดหนึ่งที่อยู่จริงของภาพในแอตทริบิวต์ที่กำหนดเองจะถูกกำหนดให้กับ SRC ของแท็ก IMG ปัจจุบันซึ่งจะตระหนักถึงการแสดงแบบไดนามิกของภาพ ในโครงการจริงที่อยู่ของรูปภาพเหล่านี้สามารถส่งผ่าน AJAX และกำหนดให้กับคุณสมบัติที่กำหนดเองของ IMG
JS ดั้งเดิมใช้ตัวอย่างการโหลดล่าช้าของภาพ:
เนื้อหาข้อความดูน่าเบื่อเล็กน้อย ฉันเขียนตัวอย่างง่ายๆและตอนนี้โพสต์รหัสทั้งหมด เพื่อนที่ต้องการมันสามารถคัดลอกได้โดยตรงแล้วคุณจะเข้าใจหลังจากดูรหัส
คัดลอกรหัสดังต่อไปนี้: <! doctype html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<title> การโหลดล่าช้าของภาพ </title>
<style>
img {display: block; width: 350px; ความสูง: 245px; พื้นหลัง: url (img/loading.gif) ศูนย์กลางที่ไม่ต้องทำซ้ำ}
</style>
</head>
<body>
<div id = "div">
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
</div>
<script type = "text/javascript">
var obj = document.getElementById ("div"). getElementsByTagname ("IMG")
h = window.innerHeight || document.documentelement.clientheight;
สำหรับ (var i = 0; i <obj.length; i ++) {
obj [i] .url = obj [i] .getAttribute ("data-url");
obj [i] .top = obj [i] .offsettop;
obj [i] .flag = true; // ป้องกันไม่ให้เบราว์เซอร์โหลดรูปภาพตลอดเวลาดังนั้นหลังจากโหลดรูปภาพสำเร็จแล้วรูปภาพจะไม่ถูกโหลดเมื่อเบราว์เซอร์เลื่อน
-
var fnload = function (obj) {
var t = document.body.scrolltop || document.documentelement.scrolltop;
if (t+h> obj.top+200 && obj.top> t) {// ให้ 200 เพื่อปรับปรุงสถานะการโหลดของผู้ใช้มันเป็นมิตรมากขึ้น
settimeout (function () {
obj.src = obj.url;
obj.flag = false;
}, 500)
-
-
window.onscroll = window.onload = function () {
สำหรับ (var i = 0; i <obj.length; i ++) {
ถ้า (obj [i] .flag) {
fnload (obj [i]);
-
-
-
</script>
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน