تصف هذه المقالة طريقة تحقيق تأخير الصورة في JavaScript الأصلي. يحتوي تحميل الصورة المتأخر فعليًا على مكون إضافي jQuery ، وطريقة التحميل بسيطة للغاية ومعقولة. ومع ذلك ، يعتقد بعض الأصدقاء أن تحميل حزمة المكونات الإضافية jQuery كبيرة جدًا ، لذلك كتبت بنفسي لمشاركتها معك.
بادئ ذي بدء ، يمكن أن ينقذ تحميل تأخير الصور عرض النطاق الترددي والحصول على تجربة مستخدم أفضل ، خاصة بالنسبة للمواقع التي تحتوي على العديد من الصور ، وهو أمر بالغ الأهمية. اسمحوا لي أن أناقش المبدأ ورمز التنفيذ لتأخير الصورة معك أدناه.
مبدأ تحميل تأخير الصورة
مبدأ تحميل تأخير الصورة هو أن الصورة SRC في HTML لا يتم ملؤها في عنوان الصورة الحقيقية ، ولكن يتم تعيين عنوان الصورة إلى علامة IMG مع سمة مخصصة ، مثل: src = "img/loading.gif" data-url = "IMG/1.JPG" ، ثم الحكم على حدث تصوير البروز من خلال JS. عند الوصول إلى نقطة معينة ، يتم تعيين العنوان الحقيقي للصورة في السمة المخصصة إلى 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").
h = window.innerheight || document.documentElement.clientheight ؛
لـ (var i = 0 ؛ i <obj.length ؛ i ++) {
obj [i] .rl = 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 ؛
إذا (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 ++) {
if (obj [i] .flag) {
fnload (obj [i]) ؛
}
}
}
</script>
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.