Native JavaScript Image Lazy Loading Plugin

Add-ons

2026-07-26 00:59 4 次浏览 • 0 次下载 2.7KB

Native JavaScript Image Lazy Loading Plugin

Plugin description: Loads images by assigning values to their src attributes only when they are scrolled into view. Simple and practical.

// Get all img elements with data-src attributes
var limg = document.querySelectorAll("img[data-src]")
// Array.prototype.forEach.call() is a quick way to access forEach and replace the empty array as this with the list you want to iterate over.
Array.prototype.forEach.call(limg, function(item, index) {
    var rect
    // Skip if data-src is empty
    if (item.getAttribute("data-src") === "")
        return
    // getBoundingClientRect is used to obtain an element's position relative to the viewport. The returned object contains properties such as top, right, bottom, and left.
    rect = item.getBoundingClientRect()
    // Dynamically load images when they enter the visible area
    if (rect.bottom >= 0 && rect.top < viewHeight) {
        (function() {
            var img = new Image()
            img.src = item.getAttribute("data-src")
            item.src = img.src
            // Add a transition effect to the image to make it appear smoothly
            var j = 0
            setInterval(function() {
                j += 0.2
                if (j <= 1) {
                    item.style.opacity = j
                    return
                }
            }, 100)
            // Remove data-src
            item.removeAttribute('data-src')
        })()
    }
})