简单实现图片懒加载原理！

最新推荐文章于 2023-03-02 09:58:53 发布
最新推荐文章于 2023-03-02 09:58:53 发布
阅读量145 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38776549/article/details/107970627
版权 
<!--
 * @Description: 希望KEEP REAL
 * @Version: 版本更新中...
 * @Autor: AKAYangYi
 * @Date: 2020-08-13 01:04:13
 * @LastEditors: YangYi
 * @LastEditTime: 2020-08-13 01:41:16
-->
<!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>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 3000px;
        }

        img {
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div class="imgbox">

    </div>
</body>

</html>
<script>
    var arr = [
        "https://img.zcool.cn/community/015aa45f323cdda801215aa038e135.png@1380w",
        "https://img.zcool.cn/community/011e6e5f334da1a80120a8214fddbe.jpg@1380w",
        "https://img.zcool.cn/community/010c115f334deda80120a821b00ad1.jpg@1380w",
        "https://img.zcool.cn/community/01be425f302bfea801215aa011d7e3.jpg@1380w",
        "https://img.zcool.cn/community/011d4b5f323ccea80120a8219b7a37.png@1380w",
        "https://img.zcool.cn/community/015aa45f323cdda801215aa038e135.png@1380w",
        "https://img.zcool.cn/community/011e6e5f334da1a80120a8214fddbe.jpg@1380w",
        "https://img.zcool.cn/community/010c115f334deda80120a821b00ad1.jpg@1380w",
        "https://img.zcool.cn/community/01be425f302bfea801215aa011d7e3.jpg@1380w",
        "https://img.zcool.cn/community/011d4b5f323ccea80120a8219b7a37.png@1380w",
    ];
    function _(ele) {
        ele = document.querySelectorAll(ele);
        if (ele.length === 1) {
            return ele[0];
        } else if (ele.length > 1) {
            return [].slice.call(ele);
        } else {
            return null;
        }
    }

    function render() {
        //创建该有的图片容器
        var box = document.createDocumentFragment();
        for (var i = 0; i < arr.length; i++) {
            var img = document.createElement("img");
            img.setAttribute("data-src", arr[i]);
            box.appendChild(img);
        }
        _(".imgbox").appendChild(box);
    }
    render();
    window.onload = function () {
        var flag = true;
        //一张图片的高度
        var imgonce = 350;
        var w_height = window.innerHeight;
        //当页面没有滚动的时候 初始渲染 在页面可是范围的图片
        if (flag) {
            var max_count = Math.floor(w_height / imgonce);
            renderimg(max_count);
        }
        window.addEventListener("scroll", function () {
            var scrolltop = document.body.scrollTop || document.documentElement.scrollTop;
            if (!scrolltop) return false;
            flag = false;
            max_count = Math.ceil((w_height + scrolltop) / imgonce);
            setTimeout(function () {
                renderimg(max_count)
            }, 2000);
        })
    }
    //渲染图片  只有出现在当前的页面才会显示
    function renderimg(count) {
        if (count > arr.length) return false;
        for (var i = 0; i < count; i++) {
            _(".imgbox > img")[i].src = _(".imgbox > img")[i].getAttribute("data-src")

        }
    }
</script>

 

我也曾经是一个单纯、善良、帅气的少年
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现图片懒加载简单的方法
爱吃糖果儿哒莲
12-23 2642
小编带大家了解一下为什么要实现图片懒加载？ 其原理就是用户在打开页面时，图片会影响页面的打开速度，导致页面访问量不高，用户体验不好，一张图的大小就是几M，通俗的讲就是对网页性能的一种优化的方式，优先显示可视区的图片，当需要显示时，再发送图片请求，避免打开页面加载过多资源。 顶部 一张图便于我们理解js代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me
vue实现图片懒加载的方法分析
10-15
在Vue.js开发环境中，实现图片懒加载的方法主要是借助特定的Vue插件来完成。本知识点将详细解析Vue中实现图片懒加载的方法，重点在于安装、配置和使用Vue-lazyload插件，以及在实际项目中的注意事项。 Vue.js图片懒...
图片懒加载实现原理
qq_35504206的博客
03-19 2046
原理将页面中的img标签src指向一张小图片或者src为空，然后定义data-src（这个属性可以自定义命名，我才用data-src）属性指向真实的图片。原生javascriptvar num = document.getElementsByTagName('img').length; var img = document.getElementsByTagName("img"); ...
JavaScript实现图片懒加载(超简单！！)
词不达意难知的博客
08-04 2208
懒加载的概念：先只加载可视区的内容，当用户向下滚动时，再继续加载后面的内容。 懒加载的好处： 1）减少加载时的线程数据，可以使可视区内的图片快速加载 2）减少了同一时间发送到服务器的请求数量，减轻服务器压力 JS代码展示 <script> // 获取图片 var oImg = document.getElementsByTagName('img'); ...
【前端】图片懒加载的原理和三种实现方式
热门推荐
qq_44947815的博客
06-14 2万+
图片懒加载的原理和实现方法
JS实现图片懒加载的几种简单方式，图片懒加载
MFWSCQ的博客
08-28 1548
记得以前手机端有个业务时将用户上传的的图片在用户往上滑动手机的时候呈现，由于刚开始用户数量少就没留意，直接将后台的数据拉过来渲染，当时后台也没有分页，可是后来参与用户多了起来，跳转到这个页面就渲染个几十几百张的去请求数据，然后服务器就崩了，所以这种情况就需要用到懒加载。当需要的时候再发送图片请求，避免打开页面加载过多资源。 原理介绍： 我们使用img标签来显示图片，img标签有src属性用来表...
原生JS实现图片懒加载之页面性能优化
10-17
一、图片懒加载原理 1. 数据存储：首先，我们需要为图片`<img>`标签添加一个自定义属性，如`data-src`，用来存储实际的图片URL。常规的`src`属性则设置为一个占位符，例如一个加载指示符或透明的`1x1`像素图像。 2...
js实现图片懒加载效果
10-19
在本文中，我们关注的是如何利用js实现图片懒加载效果。实现图片懒加载的关键在于判断哪些图片需要立即加载，哪些图片可以延迟加载。通常的做法是监听滚动事件，结合图片距离视窗顶部的位置来决定何时加载图片。 ...
原生JS实现图片懒加载(lazyload)实例
12-09
图片懒加载也是比较常见的一种性能优化的方法，最近在用vue做一个新闻列表的客户端时也用到了，这里就简单介绍下实现原理和部分代码。 实现原理 加载页面的时候，图片一直都是流量大头，针对图片的性能方法也挺多的...
js实现PC端移动端通用的图片懒加载.rar
10-15
实现图片懒加载的关键在于以下几个步骤： 1. **数据属性标记**：为需要懒加载的图片添加一个特殊的data属性，例如`data-src`，存储原始图片URL。HTML代码中的`src`属性可以设置为一个低质量的占位符，或者一个简单...
多线程下载图片的方法
啊猿的博客
03-20 311
多线程下载图片的方法 1、导入依赖 <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.6</version> </dependency> 2、程序 import org.apache.comm
python获取网址中的文件名
Nobita
10-01 963
imgurl = 'https://img.zcool.cn/community/0111605d90461ea801211d536802c3.jpg' fname = imgurl.split('/')[-1] print(fname) os._exit(0) 以上实例输出结果如下： 0111605d90461ea801211d536802c3.jpg ...
图片懒加载的原理--三种方法实现
weixin_43872282的博客
03-02 4544
3.设置img的默认src为一张1px*1px，很小很小的gif透明图片（所有的img都用这一张，只会发送一次请求），之所以需要是透明的，是需要透出通过background设置的背景图(一张loading.png，就是一个转圈圈的背景效果图)目前流行的做法是滚动动态加载，也就是懒加载，显示在屏幕之外的图片默认不加载，随着页面的滚动，图片进入了显示的范围，则触发图片的加载显示。5.等到图片进入视口后，利用js提取data-url的真实图片地址赋值给src属性，就会去发送请求加载图片，真正实现了按需加载。
75行代码 完美实现图片完整展示 flex 横向瀑布流布局
haolangtaiye的博客
11-20 2452
布局特点 代码简单 图片完整展示，不会被裁切 以图片异步加载完毕的顺序渲染图片，防止页面闪动 最后一行图片过少时，图片不会被放大得很大 在线预览 https://haolang.github.io/web/demo/500px/ 效果如下 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
原生JS实现最简单的图片懒加载
weixin_33725239的博客
08-19 683
原文地址：原生JS实现最简单的图片懒加载 欢迎star。 如果有错误的地方欢迎指正。 Demo地址：http://axuebin.com/lazyload 照片都是自己拍的哦~ 懒加载 什么是懒加载 懒加载其实就是延迟加载，是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区域的图片而不一次性加载所有图片，当需要显示的时...
web前端图片懒加载实现原理
lzf的博客
03-20 3349
摘自：web前端图片懒加载实现原理 前端时间面试的时候老是被问到图片懒加载实现及原理，由于自己在实际项目中并没有用过，只是了解过大概，所以回答起来都不尽如人意，趁这段时间空闲下来有时间好好研究下，话不多说，直奔主题~ 一、html（这里只列出相关的结构，body那些就不列了~）     1     2     3     4     5     1
JavaScript：原生JS实现图片懒加载
郭宇的博客
06-12 1万+
懒加载 用户体验 优化
js懒加载的原理及实现
最新发布
06-07
JavaScript懒加载（Lazy Loading）是一种优化网页性能的技术，它可以延迟加载某些资源，比如图片、视频、音频等，直到它们需要被展示在屏幕上时再进行加载。这样可以减少初始页面的加载时间，提高用户体验。 懒加载的原理是通过JavaScript动态地向页面中添加元素，这些元素在初始时不会加载，当用户滚动页面，元素出现在可视区域内时再进行加载。这个过程可以通过监听滚动事件来实现。 以下是一个简单的懒加载实现的示例代码： 1. 在HTML中添加需要延迟加载的元素，比如图片 ```html <img class="lazy" data-src="example.jpg" alt="Example"> ``` 2. 使用JavaScript监听页面滚动事件，在元素出现在可视区域内时添加src属性来触发加载 ```javascript function lazyLoad() { var lazyImages = document.querySelectorAll('.lazy'); lazyImages.forEach(function(img) { if (img.getBoundingClientRect().top < window.innerHeight) { img.src = img.dataset.src; img.classList.remove('lazy'); } }); } document.addEventListener('scroll', lazyLoad); ``` 在这个示例中，我们使用了querySelectorAll()方法来获取所有有“lazy”类的元素，然后在滚动事件中遍历这些元素。如果元素的位置小于窗口的可视高度，就将data-src属性赋值给src属性来触发加载，并将“lazy”类从元素中移除。 注意，这只是一个简单的懒加载实现示例，实际应用中需要考虑更多的细节，比如优化滚动事件的性能、处理图片的加载失败等等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值