前端懒加载和预加载

最新推荐文章于 2024-07-30 22:36:34 发布

hellocoder2029

最新推荐文章于 2024-07-30 22:36:34 发布

阅读量261

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/hellocoder2029/article/details/127646769

版权

本文详细介绍了前端的懒加载和预加载技术，包括它们的目的、实现方式及效果。懒加载用于优化网页性能，延迟非首屏图片的加载；预加载则通过提前加载图片资源提高用户体验。文章提供了具体的实现代码，通过CSS和JavaScript两种方法来实现这两种加载策略，并通过实际效果展示了它们的工作原理。

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

懒加载和预加载的目的都是为了提高用户的体验，二者行为是相反的，一个是延迟加载，另一个是提前加载。懒加载对缓解服务器压力有一定作用，预加载则会增长服务器前端压力缓存。

懒加载 lazyload

懒加载：又叫延迟加载、按需加载，当我们打开一个网页，优先展示的首屏图片就先加载，而其他的图片，等到需要去展示的时候再去请求图片资源。

目的：更好的加载页面的首屏内容，对于含有不少图片的比较长的网页来讲，能够加载的更快，避免了首次打开时，一次性加载过多图片资源，是对网页性能的一种优化方式。

原理：浏览器解析到img标签的src有值，才会去发起请求，那么就可以让图片需要展示时，才对其src赋值真正的图片地址。

实现代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图片懒加载</title>
    <style>
      * {
     
        margin: 0;
        padding: 0;
      }
      img {
     
        margin: 50px;
        width: 400px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div class="img-container">
      <img
        src="loading.gif"
        alt=""
        data-src="1.jpg"
        class="lazyload"
      />
    </div>
    <div class="img-container">
      <img
        src="loading.gif"
        alt=""
        data-src="2.jpg"
        class="lazyload"
      />
    </div>
    <div class="img-container">
      <img
        src="loading.gif"
        alt=""
        data-src="3.jpg"
        class="lazyload"
      />
    </div>
    <div

最低0.47元/天解锁文章

hellocoder2029

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端懒加载和预加载

懒加载和预加载的目的都是为了提高用户的体验，二者行为是相反的，一个是延迟加载，另一个是提前加载。懒加载对缓解服务器压力有一定作用，预加载则会增长服务器前端压力缓存。懒加载：又叫延迟加载、按需加载，当我们打开一个网页，优先展示的首屏图片就先加载，而其他的图片，等到需要去展示的时候再去请求图片资源。目的：更好的加载页面的首屏内容，对于含有不少图片的比较长的网页来讲，能够加载的更快，避免了首次打开时，一次性加载过多图片资源，是对网页性能的一种优化方式。原理：浏览器解析到img标签的src有值，才会去发起请求，那么
复制链接

扫一扫