lazyload - 图片懒加载 #1

ly2011 · 2017-03-03T12:02:55Z

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

<head>
    <title>LazyLoad</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        img {
            display: block;
            margin-bottom: 50px;
            width: 400px;
            height: 500px;
        }
    </style>
</head>

<body>
    <img src="images/default.jpg" data-src="http://lofter.nos.netease.com/sogou-RkZCZmhNZldvRy1NYTViWHFyYjZSZl9NUE5pM0hTN0pLSmZGSko3N3JUTXVfakNBMFVBbVVTaW9FVDhPOGNJdw.jpg" alt="">
    <img src="images/default.jpg" data-src="http://lofter.nos.netease.com/sogou-ZHk5Y1ZCdHB6SWU4VDdhdWRsTzgxSmFCaThmZUJYQjRScngwd3N6M0NPY0h1ZFo0TzhoZnR0enpDRUVOTEdKWQ.jpg" alt="">
    <img src="images/default.jpg" data-src="http://lofter.nos.netease.com/sogou-VjJKN2c3WDRZQXJTM2tabjkxM29yRzQxMkRSUjdFZV9OWHJVT2xueXlBeUY0VU1sZ1lUbFZscUwtLWtSVms1Uw.jpg" alt="">
    <img src="images/default.jpg" data-src="http://lofter.nos.netease.com/sogou-TW82T2hHdk9iMlM4WGNadjU5bE0yNmRSTGZ6ZVlCNVdWWThORmR4eXJoaWdnel9tanAyWXBVemxZQWpDVjZydw.jpg" alt="">
    <img src="images/default.jpg" data-src="http://lofter.nos.netease.com/sogou-aTQtNE5hVzVZRDFLZTFkeWVZNWRSbkZFXzhaMDhTblRFSXBieklXUUQ0LUhKVUxkNTZlZ3ZiTmVuRkRVVHRFNg.jpg" alt="">
    <img src="images/default.jpg" data-src="http://lofter.nos.netease.com/sogou-eXFRQzQ4Tm92OEQ1VVl4b0pkWWdTQXFLUmJDS3BSX2dWR1VJT3pVZlZnM2w3YV9zS3lkT2VVZUVQckI4dDNCYg.jpg" alt="">

    <script>
        let images = document.getElementsByTagName('img')
        let num = images.length
        let n = 0 // 存储图片加载到的位置, 避免每次都从第一张图片开始遍历

        function lazyload() {

            console.log('lazyload...')

            const seeHeight = document.documentElement.clientHeight // 可视区域高度
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop // 滚动条距离顶部高度
            for (let i = n; i < num; i++) {
                if (images[i].offsetTop < seeHeight + scrollTop) {
                    if (images[i].getAttribute('src') === 'images/default.jpg') {
                        images[i].src = images[i].getAttribute('data-src')
                    }
                    n = i + 1
                }
            }
        }

        /**
         * 节流函数
         * fun 要执行的函数
         * delay 延迟时间
         * time 在 time 时间内必须执行一次
         */

        function throttle(fun, delay, time) {
            let timeout = null
            let startTime = new Date()

            return function() {
                var context = this
                var args = arguments
                var curTime = new Date()

                clearTimeout(timeout)

                // 如果达到了规定的触发时间间隔, 触发 handler
                if (curTime - startTime >= time) {
                    fun.apply(context, args)
                    startTime = curTime // 还没达到触发间隔, 重新设定定时器
                } else {
                    timeout = setTimeout(function() {
                        fun.apply(context, args)
                    }, delay)
                }
            }
        }

        lazyload() // 页面载入完毕初始化首页(可视区域)的页面图片
        window.addEventListener('scroll', throttle(lazyload, 500, 1000), false)
    </script>
</body>

</html>

ly2011 added the JS label Apr 9, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

lazyload - 图片懒加载 #1

lazyload - 图片懒加载 #1

ly2011 commented Mar 3, 2017

lazyload - 图片懒加载 #1

lazyload - 图片懒加载 #1

Comments

ly2011 commented Mar 3, 2017