โดยไม่ต้องกังวลใจเพิ่มเติมเพียงแค่ดูตัวอย่าง
ก่อนอื่นวิธีการเขียนเครื่องหมายภาพ
<img data-src = "/images/image.jpg">
คุณต้องใส่ที่อยู่ของภาพลงในแอตทริบิวต์ data-src และไม่จำเป็นต้องใช้ค่า src ดังนั้นคุณสามารถลบแอตทริบิวต์ src ได้โดยตรง
รหัส CSS
สำหรับภาพทั้งหมดที่มีแอตทริบิวต์ data-src เราจะแสดงสถานะเป็นที่มองไม่เห็นการปรับผ่านความโปร่งใส:
img {ความทึบ: 1; การเปลี่ยนแปลง: ความทึบ 0.3s;} img [data-src] {ความทึบ: 0;}จุดประสงค์ในการเขียนด้วยวิธีนี้คืออะไร? เมื่อภาพโหลดคุณจะสามารถเห็นเอฟเฟกต์
รหัส JavaScript
ในที่สุดเราจะลบแอตทริบิวต์ data-src และแทนที่ด้วยแอตทริบิวต์ SRC แต่นี่คือการกระทำหลังจากที่ภาพถูกโหลดสำเร็จ:
[] .foreach.call (document.QuerySelectorall ('img [data-src]'), ฟังก์ชั่น (img) {img.setAttribute ('src', img.getAttribute ('data-src')); img.onload = function ()เมื่อเปรียบเทียบกับเทคโนโลยีการโหลดล่าช้าของภาพอื่น ๆ วิธีนี้ง่ายมาก มันไม่จำเป็นต้องใช้เงื่อนไขอื่น ๆ และสามารถใช้ได้ทุกที่ มันมีความยืดหยุ่นมากในการใช้งาน
แต่ควรสังเกตว่าความเรียบง่ายมีดีที่สุดหรือไม่ดีและมันก็จะไม่เพียงพอเนื่องจากความเรียบง่าย มันไม่มีฟังก์ชั่นการเลื่อนรูปภาพลงในหน้าต่างภาพแล้วโหลด เทคโนโลยีใดที่จะใช้ในตอนท้ายขึ้นอยู่กับสถานการณ์
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการทำงานและการศึกษาของทุกคน