图片懒加载的几种方法

jjjjjjjjj¢

于 2024-03-03 19:09:53 发布

阅读量410

点赞数 10

分类专栏： js手写题文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/weixin_45825917/article/details/136436262

版权

本文介绍了如何在HTML中使用IntersectionObserverAPI来实现在用户滚动到图片时才加载图片资源，同时展示了如何结合懒加载技术，提高网页性能，减少初始加载时的网络请求量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <style>
    .container {
      width: 1000px;
      margin: 0 auto;
      background-color: pink;
    }
    .container > img {
      display: block;
      width: 400px;
      height: 400px;
      margin-bottom: 50px;
    }
  </style>
  <body>
    <div class="container">
      <img src="./img/loading.jpg" data-src="./img/pic.png" />
      <img src="./img/loading.jpg" data-src="./img/pic.png" />
      <img src="./img/loading.jpg" data-src="./img/pic.png" /&g

最低0.47元/天解锁文章