实现图片懒加载简单的方法

爱吃糖果儿哒莲

于 2020-12-23 19:23:17 发布

阅读量2.6k

点赞数 5

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_53587096/article/details/111597010

版权

本文介绍了图片懒加载的原理，旨在提升网页性能和用户体验。通过延迟加载非可视区域的图片，降低页面初次打开时的资源消耗。简单JS代码实现，确保用户仅在需要时加载图片。

摘要由CSDN通过智能技术生成

小编带大家了解一下为什么要实现图片懒加载？

其原理就是用户在打开页面时，图片会影响页面的打开速度，导致页面访问量不高，用户体验不好，一张图的大小就是几M，通俗的讲就是对网页性能的一种优化的方式，优先显示可视区的图片，当需要显示时，再发送图片请求，避免打开页面加载过多资源。

顶部

一张图便于我们理解js代码

在这里插入图片描述

<!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;

        }
        img{
    
            width: 400px;
            height: 500px;
        }

    </style>
</head>
<body>
    
    <!-- 自定义一个lazyload-src属性 -->
    <img src="../img/loading.gif" lazyload-src="../img/1.jpg" alt="">

最低0.47元/天解锁文章

爱吃糖果儿哒莲

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
7
评论
实现图片懒加载简单的方法

小编带大家了解一下为什么要实现图片懒加载？其原理就是用户在打开页面时，图片会影响页面的打开速度，导致页面访问量不高，用户体验不好，一张图的大小就是几M，通俗的讲就是对网页性能的一种优化的方式，优先显示可视区的图片，当需要显示时，再发送图片请求，避免打开页面加载过多资源。顶部一张图便于我们理解js代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <me
复制链接

扫一扫