手机直播源码，js实现懒加载、vue实现图片懒加载指令

图片懒加载

监听滚动条滚动事件，当视口的高度＋滚动高度，大于图片所在位置举例顶部的偏移量时(也就是距离)，加载图片资源

<br>index.html<br><!DOCTYPE html><br><html><br> <br><head><br>    <meta charset="UTF-8"><br>    <meta name="viewport" content="width=device-width, initial-scale=1.0"><br>    <title>Document</title><br></head><br> <br><body><br>    <div style="height: 1200px;"></div><br>    <img src="https://ts2.cn.mm.bing.net/th?id=OIP-C.Fi0rA6s5NQ1VIlwp9IzhIgHaKe&w=210&h=297&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2"<br>        data-src="https://ts3.cn.mm.bing.net/th?id=OIP-C.D-43aYLc7We_sO_5ZSMIXgHaFj&w=288&h=216&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2" /><br>    <script><br>        let img = document.getElementsByTagName("img");<br>        let num = img.length;<br>        let count = 0; <br> <br>        lazyload();<br> <br>        window.addEventListener('scroll', lazyload); <br> <br>        function getTop(el) {<br>            var T = el.offsetTop;<br>            // 迭代地获取元素及其父元素相对于文档顶部的累积偏移量<br>            while (el = el.offsetParent) {<br>                T += el.offsetTop;<br>            }<br>            // 循环后 返回元素相对于文档顶部的总偏移量<br>            return T;<br>        }<br> <br>        function lazyload() {<br>            //视口高度<br>            let viewHeight = document.documentElement.clientHeight || document.body.clientHeight;<br>            //滚动高度<br>            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;<br>            for (let i = count; i < num; i++) {<br>                // 元素现在已经出现在视口中<br>                if (getTop(img[i]) < scrollTop + viewHeight) {<br>                    // 如何图片等于默认图 则加载新图<br>                    if (img[i].getAttribute("src") !== "https://ts2.cn.mm.bing.net/th?id=OIP-C.Fi0rA6s5NQ1VIlwp9IzhIgHaKe&w=210&h=297&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2") continue;<br>                    img[i].src = img[i].getAttribute("data-src");<br>                    count++;<br>                } else {<br>                    break;<br>                }<br>            }<br>        }<br>    </script><br></body><br> <br></html>

使用浏览器提供的getBoundingClientRect()，优化上述代码： lazyload修改如下：

getBoundingClientRect()用于获取元素相对于视口的位置信息

<br>        function lazyload() {<br>            let viewHeight = document.documentElement.clientHeight || document.body.clientHeight;<br>            for (let i = count; i < num; i++) {<br>                // getBoundingClientRect() 用于获取元素相对于视口的位置信息<br>                // 当相对于视口位置 小于等于视口时说明图片已经可见了<br>                if (img[i].getBoundingClientRect().top < viewHeight) {<br>                    if (img[i].getAttribute("src") !== "https://ts2.cn.mm.bing.net/th?id=OIP-C.Fi0rA6s5NQ1VIlwp9IzhIgHaKe&w=210&h=297&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2") continue;<br>                    img[i].src = img[i].getAttribute("data-src");<br>                    count++;<br>                } else {<br>                    break;<br>                }<br>            }<br>        }

以上就是手机直播源码，js实现懒加载、vue实现图片懒加载指令，更多内容欢迎关注之后的文章