Lazy Load usage

[Tsokotsa-mz]

Hi,

i would like to apply the lazy load functionality to my images and i would like to know what attributes must i add to the img tag?

additional, can i apply the same functionality to a video? so it allows the page to load even if the video is not full loaded.

---

[Support]

Hello,

1) To lazy load images:

<img class="img-fluid" src="img/lazy.png" data-plugin-lazyload data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/blog/wide/blog-42.jpg" width="1110" height="462" alt="">

* threshold tells to browser load the image 500 px before appear in the view.

To lazy load images as background:

<div class="rounded mb-5 mt-5" style="min-width: 100%; min-height: 500px; background-size: cover; background-image: url('img/lazy.png');" data-plugin-lazyload data-plugin-options="{'threshold': 0, 'effect':'fadeIn'}" data-original="img/blog/wide/blog-39.jpg"></div>

2) To lazy load videos you can us the attribute preload. For example:

<video controls preload="none" poster="img/cover.jpg" width="300">
    <source src="files/sample.mp4" type="video/mp4">
</video>

* Note that if you have the autoplay enabled, this will not work since autoplay enables the preload by default.

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Author]

Posts