图片懒加载

最新推荐文章于 2024-01-11 14:36:27 发布
最新推荐文章于 2024-01-11 14:36:27 发布
阅读量41 收藏
点赞数
分类专栏： 案例 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49893750/article/details/108503094
版权 
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 200px;
            height: 300px;
            border: 1px solid #000;
            margin: 10px
        }
    </style>
</head>

<body>
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <img imgSrc="./img/11.jpg" alt="">
    <script>
        /* 
            懒加载： 只加载当前处于屏幕中间的内容, 其他未滚动到页面中的内容只占位不加载
            imgSrc： 存储页面未加载到的图片的地址
            当页面滚动到元素所在位置的时候, 需要将imgSrc设置给img标签的src属性
            如何判断元素是否处于当前页面中： 
                页面滚动距离 + 屏幕的可视高度 >= 元素距离页面顶部距离
        */
        // var img = document.getElementsByTagName('img');
        // console.log(img);
        // // 页面可视高度
        // var ch = document.documentElement.clientHeight;
        // console.log(ch);
        // var st = document.documentElement.scrollTop;
        // console.log(st);
        // // 一边滚动一边判断每一个元素是否进入页面
        // for (var i = 0; i < img.length; i++) {
        //     var ot = img[i].offsetTop;
        //     // console.log(ot);
        //     // 判断每一个img
        //     if (st + ch >= ot) {
        //         // 将imgSrc设置给img标签的src属性
        //         img[i].src = img[i].getAttribute('imgSrc');
        //     }

        // }
        /* window.onscroll = function () {
            // 滚动的距离
            var st = document.documentElement.scrollTop;
            console.log(st);
            // 一边滚动一边判断每一个元素是否进入页面
            for (var i = 0; i < img.length; i++) {
                var ot = img[i].offsetTop;
                // console.log(ot);
                // 判断每一个img
                if (st + ch >= ot) {
                    // 将imgSrc设置给img标签的src属性
                    img[i].src = img[i].getAttribute('imgSrc');
                }

            }
        } */

        window.onload = window.onscroll = window.onresize = function () {
            var img = document.getElementsByTagName('img');
            // 页面可视高度
            var ch = document.documentElement.clientHeight;
            // 滚动的距离
            var st = document.documentElement.scrollTop;
            console.log(st);
            // 一边滚动一边判断每一个元素是否进入页面
            for (var i = 0; i < img.length; i++) {
                var ot = img[i].offsetTop;
                // console.log(ot);
                // 判断每一个img
                if (st + ch >= ot) {
                    // 将imgSrc设置给img标签的src属性
                    img[i].src = img[i].getAttribute('imgSrc');
                }
            }
        }
    </script>
</body>

</html>

 

吴机智
关注
专栏目录
Vue图片懒加载
小绵杨
12-11 3875
1、问题 在vue项目中，如果图片是从服务器端加载到页面上，图片较大的时候，就会存在一部分一部分加载的情况，会显示非常卡顿，影响体验。 2、实现 （1）、图片懒加载 首先将图片的src链接设为一张我们已经准备好的图片（比如类似加载中的图片），并将其真正的图片地址存储在img标签的自定义属性中。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。这样就可以缓解服务器压力，并且提高用户体验。 （2）、安装vue-lazyload npm i vue-lazyload
Vue3实现图片懒加载及自定义懒加载指令
~~~
08-12 9437
图片懒加载是一种常见性能优化的方式，它只去加载可视区域图片，而不是在网页加载完毕后就立即加载所有图片，能减少很多不必要的请求，极大的提升用户体验。图片懒加载的实现原理：在图片没进入可视区域的时候，只需要让 img 标签的 src 属性指向一张默认图片，在它进入可视区后，再替换它的 src 指向真实图片地址即可。本文就分享一下在vue3中实现图片懒加载的几种方式，包括使用插件以及自定义v-lazy指令。
html图片懒加载,图片懒加载原理及实现
weixin_39854440的博客
06-09 1595
原理：先将img标签的src链接设为同一张图片(比如空白图片)，然后给img标签设置自定义属性(比如 data-src),然后将真正的图片地址存储在data-src中，当JS监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中。达到懒加载的效果。这样做能防止页面一次性向服务器发送大量请求，导致服务器响应面，页面卡顿崩溃等。实现：Document.container{max-wid...
vue图片懒加载
weixin_49554584的博客
01-19 6565
我们使用软件的时候，会有很多图片需要加载，但是当网络环境不好，或内存不足的情况，就会导致用户首屏加载特别慢，影响用户体验，所以为了解决这个问题，提出了图片懒加载的方法来解决该问题。这样做的好处就是可以使用当前网络环境来全力加载该可视区域的图片，增加加载速度；②首屏加载时候img标签src赋为空值，这样就不会去渲染看不见的图片而浪费时间。③当用户滑动到图片的可视区域后，替换src的路径，改为正式路径，则开始渲染图片。①当图片区域到达用户界面可视区域的时候才进行加载图片。
Element-ui图片懒加载
最新发布
橙-极纪元-cplvfx-JJY.Cheng
01-11 932
Element-ui图片懒加载使用说明
图片懒加载文件jquery插件库EasyLazyload
10-11
图片懒加载是一种优化网页性能的技术，它在网页加载时并不会一次性加载所有图片，而是等到用户滚动页面，即将看到这些图片时才开始加载。这样可以显著减少初始页面加载时间，提高用户体验，特别是对于拥有大量图片的...
微信小程序实现图片懒加载的示例代码
08-28
微信小程序实现图片懒加载的示例代码 微信小程序实现图片懒加载的示例代码是指通过在页面预加载图片，提高用户体验度的一种技术。这种技术可以在微信小程序中实现，通过预加载图片，减少用户等待的时间，提高用户...
angular实现图片懒加载实例代码
08-30
在Web开发中，图片懒加载是一种优化网页性能的技术，它允许图片在真正进入视口时才开始加载，从而减少页面初始化时的数据量和渲染时间。AngularJS，作为一个强大的前端框架，提供了多种实现图片懒加载的方法。本文将...
原生JS实现图片懒加载之页面性能优化
10-17
图片懒加载是一种有效的优化策略，它能够显著提升用户体验，尤其是在处理大量图片的页面时。本文将深入探讨如何使用原生JavaScript实现图片懒加载，以及这种方式如何帮助优化页面性能。 一、图片懒加载原理 1. ...
前端图片懒加载(lazyload)的实现方法(提高用户体验)
08-29
图片懒加载（Lazy Load）是一种优化网页性能的技术，它允许我们在网页内容加载时，只加载用户当前可视区域内的图片，而将不在视口范围内的图片延迟加载。这种技术尤其适用于内容丰富的网页，如社交媒体、博客或者...
切换图片（箭头）
m0_49893750的博客
09-10 1063
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ ...
面向对象 tab栏切换 案例
m0_49893750的博客
03-19 606
功能： 点击 tab栏,可以切换效果. 点击 + 号, 可以添加 tab 项和内容项. 点击 x 号, 可以删除当前的tab项和内容项. 双击tab项文字或者内容项文字,可以修改里面的文字内容. html部分 <body> <main> <h4> Js 面向对象 动态添加标签页 </h4> <div class="tabsbox" id="tab"> .
点击按钮修改样式
m0_49893750的博客
09-10 400
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> * { ...
切换图片（箭头+圆点）
m0_49893750的博客
09-10 294
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { ...
发送验证码按钮
m0_49893750的博客
09-10 252
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> div { ...
scroll回到顶部
m0_49893750的博客
09-10 246
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> button{ display: none; .
加减按钮改变字体大小
m0_49893750的博客
09-10 239
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> p{ ...
切换图片（圆点）
m0_49893750的博客
09-10 236
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; ...
深度解析：网页图片懒加载的实现策略
"本文主要探讨了在项目中实现图片懒加载的不同方法，包括利用getBoundingClientRect API、offsetTop API、IntersectionObserver API以及使用vue-lazyload插件。这些技术旨在优化用户体验，减少服务器压力，提高页面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值