دون مزيد من اللغط ، فقط انظر إلى المثال
بادئ ذي بدء ، طريقة كتابة علامات الصورة
<img data-src = "/images/image.jpg">
تحتاج إلى وضع عنوان الصورة في سمة data-src ، ولا توجد حاجة لقيمة src ، بحيث يمكنك إزالة سمة src مباشرة.
رمز CSS
بالنسبة لجميع الصور التي تحتوي على سمة data-src ، سنعرض في البداية الحالة غير مرئية ، وضبطها من خلال الشفافية:
IMG {عتامة: 1 ؛ الانتقال: التعتيم 0.3S ؛} IMG [Data-Src] {opacity: 0 ؛}ما هو الغرض من الكتابة بهذه الطريقة؟ عندما يتم تحميل الصورة ، ستتمكن من رؤية التأثير.
رمز JavaScript
سنقوم في النهاية بإزالة سمة data-src واستبدالها بسمة SRC ، ولكن هذا هو الإجراء بعد تحميل الصورة بنجاح:
[]. foreach.call (document.queryselectorall ('img [data-src]') ، function (img) {img.setAttribute ('src' ، img.getAttRibute ('data-src')) ؛ img.onload = function () {img.removeattribute ('data-src') ؛} ؛}) ؛بالمقارنة مع تقنيات تحميل تأخير الصور المختلفة الأخرى ، فإن هذه الطريقة بسيطة للغاية. لا يتطلب أي شروط أخرى تقريبًا ويمكن استخدامها في أي مكان. إنه مرن للغاية للاستخدام.
ولكن تجدر الإشارة إلى أن البساطة لها الأفضل أو السيئة ، وستكون أيضًا غير كافية بسبب البساطة. لا يحتوي على وظيفة تمرير الصور في النافذة المرئية ثم تحميلها. أي التكنولوجيا التي يجب استخدامها في النهاية تعتمد على السيناريو.
ما سبق هو كل شيء عن هذا المقال ، وآمل أن يكون مفيدًا لعمل الجميع والدراسة.