Front end performance optimization lazy load and preload

Lazy loading

code implementation

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="lazyload.css">
</head>

<body>
    <div class="image-list">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i2/252339290/TB29PYUXnIlyKJjSZFrXXXn2VXa_!!252339290-0-beehive-scenes.jpg_180x180xzq90.jpg_.webp" alt="">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i4/2260152888/O1CN01vw2e251XCkJr0VPZU_!!2260152888-0-beehive-scenes.jpg_250x250xz.jpg" alt="">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i3/24687421/TB2Xg1izsyYBuNkSnfoXXcWgVXa_!!24687421-0-beehive-scenes.jpg_250x250xz.jpg" alt="">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i4/890151842/TB2II1mnZbI8KJjy1zdXXbe1VXa_!!890151842-0-beehive-scenes.jpg_250x250xz.jpg" alt="">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i2/2096513830/TB2l1W0kRnTBKNjSZPfXXbf1XXa_!!2096513830-0-beehive-scenes.jpg_250x250xz.jpg" alt="">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i3/2586222636/TB2RDGrpqAoBKNjSZSyXXaHAVXa_!!2586222636-0-daren.jpg_250x250xz.jpg" alt="">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i2/1870112525/TB2Ae.xbOwIL1JjSZFsXXcXFFXa_!!1870112525-2-beehive-scenes.png_250x250xz.jpg" alt="">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i2/2194952831/TB2PwWty7qvpuFjSZFhXXaOgXXa_!!2194952831-0-beehive-scenes.jpg_250x250xz.jpg" alt="">
    </div>
    <script src="./lazyload.js"></script>
</body>

</html>

css

.image-item {
    display: inline-block;
    width: 100%;
    height: 300px;
    background: gray;
}

js

var viewHeight = document.documentElement.clientHeight;

function lazyload() {
    var eles = document.querySelectorAll('img[data-original][lazyload]');
    eles.forEach(function(item){
        var rect;
        if (item.dataset.original === '') {
            return
        }
        rect = item.getBoundingClientRect();
        if (rect.bottom >= 0 && rect.top < viewHeight) {
            (function() {
                var img = new Image();
                img.src = item.dataset.original;
                console.log(img.src)
                img.onload = function() {
                    item.src = img.src;
                }
                item.removeAttribute('data-original')
                item.removeAttribute('lazyload')
            })()
        }
    })
}

lazyload();
document.addEventListener('scroll', lazyload)

Effect

Blue is the picture that has been requested to load
Red is the picture that has not been requested to load

Open by default, no operation before

Before scrolling down

After scrolling down

Cool attribute

Document.addeventlistener (event listener)

document.addEventListener('scroll', function() {
    console.log('aa')
})

img.onload

The event is executed immediately after the image is loaded

getBoundingClientRect

Gets the set of positions of an element relative to the window. There are top, right, bottom, left and other attributes in the collection

Document height

document.documentElement.clientHeight: size of the viewport
document.documentElement.scrollHeight: the size of the document
document.documentElement.offsetHeight: the size of the document

Posted by Fastback_68 on Tue, 03 Dec 2019 02:51:07 -0800

Programmer Group