前端性能优化(一) IntersectionObserver 实现图片懒加载

最新推荐文章于 2024-05-18 16:08:18 发布

yazhiShaw

最新推荐文章于 2024-05-18 16:08:18 发布

阅读量1.3k

点赞数 3

分类专栏：性能优化文章标签：懒加载性能优化

本文链接：https://blog.csdn.net/weixin_39357177/article/details/104472956

版权

图片懒加载原理：

先将img标签的src设置为同一张图片，减少http的请求数量，给img标签自定义属性，把真正的路径放在自定义属性中（比如data-src），当监听到img出现在可视窗口时候，将src替换成真正的路径。

图片懒加载能解决什么问题：

能防止页面一次性向服务器发送大量请求，导致服务器响应面，页面卡顿崩溃等，从而达到性能优化的目的。

下面介绍两种实现图片懒加载的方式：

一、通过监听页面的scroll事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://mo.aaadns.com.shaw.dev.cc/js/jquery/jquery-core.src.js?v=201611081523"></script>
</head>
<body>
    <style>
        img{
            display: block;
            width: 300px;
            height: 300px;
            border: 1px solid #ccc;
            margin-bottom: 20px;
            padding: 1px;
        }
        .imgFade {
            transition: 0.4s opacity;
            -webkit-animation: fadeIn 0.4s linear;
            animation: fadeIn  0.4s linear;
        }
        @-webkit-keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }
    </style>
    <img src="http://mo.aaadns.com/image/loading/fill.jpg?v=201910231600" data-src="https://13799942.s61i.faiusr.com/2/AD0IhqTKBhACGAAglpb0yAUoraL29wcw_QI49wE.jpg">
    <img src="http://mo.aaadns.com/image/loading/fill.jpg?v=201910231600" data-src="https://13799942.s61i.faiusr.com/2/AD0IhqTKBhACGAAglpb0yAUoraL29wcw_QI49wE.jpg">
    <img src="http://mo.aaadns.com/image/loading/fill.jpg?v=201910231600" data-src="https://13799942.s61i.faiusr.com/2/AD0IhqTKBhACGAAglpb0yAUoraL29wcw_QI49wE.jpg">
    <img src="http://mo.aaadns.com/image/loading/fill.jpg?v=201910231600" data-src="https://13799942.s61i.faiusr.com/2/AD0IhqTKBhACGAAglpb0yAUoraL29wcw_QI49wE.jpg">
    <img src="http://mo.aaadns.com/image/loading/fill.jpg?v=201910231600" data-src="https://13799942.s61i.faiusr.com/2/AD0IhqTKBhACGAAglpb0yAUoraL29wcw_QI49wE.jpg">
    <img src="http://mo.aaadns.com/image/loading/fill.j

最低0.47元/天解锁文章

yazhiShaw

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
前端性能优化(一) IntersectionObserver 实现图片懒加载

主要实现流程：先将img标签的src链接设为同一张图片（比如空白图片），然后给img标签设置自定义属性（比如 data-src）,然后将真正的图片地址存储在data-src中，当JS监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中。达到懒加载的效果。现将img标签的src设置为同一张图片，减少http的请求数量，给img标签自定义属性，把真正的路径挡在自定义属性中（比...
复制链接

扫一扫