首页 > 其他分享 >前端页面的懒加载和预加载

前端页面的懒加载和预加载

时间:2023-11-17 17:22:42浏览次数:30  
标签:function 前端 加载 window let imgs document 页面

前言

懒加载也就是延迟加载。当访问一个页面的时候,先把 img 元素或是其他元素的背景图片路径替换成一张大小为 1*1px 图片的路径(这样就只需请求一次,俗称占位图),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,从而减轻服务器压力,避免用户等待时间过长(一般在网站图片很多的时候使用,比如淘宝,京东等)

预加载则是在进入页面后提前加载图片等资源,等用户用到该图片或者资源时可以直接从本地缓存渲染,达到无缝加载,增加用户体验

一、懒加载

body 部分代码

<body>
  <div class="box">
    <img class="lazy-load" data-src="./images/001.jpg" />
    <img class="lazy-load" data-src="./images/002.jpg" />
    <img class="lazy-load" data-src="./images/003.jpg" />
    <img class="lazy-load" data-src="./images/004.jpg" />
  </div>
</body>

js 代码

let imgs = document.getElementsByClassName("lazy-load");
lazyLoad(imgs);
window.onscroll = function () {
  lazyLoad(imgs);
};
function lazyLoad(imgs) {
  // 获取可视区的高度
  let height = document.documentElement.clientHeight;
  // 获取滚动条的位置
  let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  // 遍历图片
  for (let i = 0; i < imgs.length; i++) {
    if (imgs[i].offsetTop < height + scrollTop) {
      if (imgs[i].getAttribute("src") == "" || !imgs[i].getAttribute("src")) {
        imgs[i].src = imgs[i].getAttribute("data-src");
      }
    }
  }
}

二、预加载

body 部分代码

<body>
  <div class="box">
    <div id="preload1"></div>
    <div id="preload2"></div>
    <div id="preload3"></div>
    <div id="preload4"></div>
  </div>
</body>

1)使用 css 和 JavaScript 预加载

// 将加载图片封装到一个函数中
function preloader() {
  if (document.getElementById) {
    document.getElementById("preload1").style.background =
      "url(./images/001.jpg) no-repeat -9999px -9999px";
    document.getElementById("preload2").style.background =
      "url(./images/002.jpg) no-repeat -9999px -9999px";
    document.getElementById("preload3").style.background =
      "url(./images/003.jpg) no-repeat -9999px -9999px";
    document.getElementById("preload4").style.background =
      "url(./images/004.jpg) no-repeat -9999px -9999px";
  }
}
// 监听页面是否加载完成,只能加载完成后才执行预加载否则预加载内容过大会让用户等待,体验效果差
function addLoadEvent(fn) {
  let load = window.onload;
  if (typeof window.load == "function") {
    window.onload = fn;
  } else {
    window.onload = function () {
      if (load) {
        load();
      }
      fn();
    };
  }
}
addLoadEvent(preloader);

2)使用 JavaScript 预加载

// 预加载图片
function preloader() {
  //定义一个函数
  if (document.images) {
    let img1 = (new Image().src = "./images/001.jpg");
    let img2 = (new Image().src = "./images/002.jpg");
    let img3 = (new Image().src = "./images/003.jpg");
    let img4 = (new Image().src = "./images/004.jpg");
  }
}
// 监听页面是否加载完成,只能加载完成后才执行预加载否则预加载内容过大会让用户等待,体验效果差
function addLoadEvent(fn) {
  let load = window.onload;
  if (typeof window.load == "function") {
    window.onload = fn;
  } else {
    window.onload = function () {
      if (load) {
        load();
      }
      fn();
    };
  }
}
addLoadEvent(preloader);

3)使用 Ajax 预加载

onload = function () {
  let xhr1 = null;
  setTimeout(function () {
    // 实例化请求对象
    xhr1 = new XMLHttpRequest();
    // 创建请求
    xhr1.open("请求方式(get/post)", "文件路径", 异步or同步); //true 表示异步请求  false表示同步请求
    // 向后台发送请求
    xhr1.send();
  }, 10000); // 使用定时器的目的:避免请求的时间过长
};

总结

懒加载和预加载都是为了优化用户体验,优点是可以减轻服务器压力。缺点就是网速不好的情况下用户体验会比较差。
预加载有三种方式,css 和 JavaScript 加载如果某一张图片过大会导致后边加载不出来,在前端可能就会渲染不出来。所以比较推荐使用 JAvaScript 实现预加载。
预加载在网页相对较小的情况下预加载可以让用户无缝打开对应图片视频等资源大大提升用户体验。同时也会增加服务器前端压力

标签:function,前端,加载,window,let,imgs,document,页面
From: https://www.cnblogs.com/wp-leonard/p/17839252.html

相关文章

  • 实例解析html页面语言
    清晰的了解html代码表达的意思才能准确的通过代码展示出开发者的设计思路。这里总结了一些常见的的页面代码,逐行解释其表达的意思,以备能随时翻阅,常备常练。示例资料<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=......
  • 前端应该如何封装高扩展的axios请求库
    我看了很多axios的封装,但是我感觉他们的封装。也不够自由,主要是写完之后,如果以后有东西需要修改的时候,还要回去拦截器进行修改。但是有一些东西拦截器可能是你以后的业务需求才需要添加的。我就在想我能不能拦截器做成插件式的模式进行动态配置呢?例如下面的效果,点击添加一个请......
  • created中两次数据修改,会触发几次页面更新
    面试题:created生命周期中两次修改数据,会触发几次页面更新?一、同步的先举个简单的同步的例子:newVue({el:"#app",template:`<div><div>{{count}}</div></div>`,data(){return{count:1,};},created(){this.count=2;......
  • 直播平台搭建,实现自定义设置登录页面
    直播平台搭建,实现自定义设置登录页面1.在resources中建立static文件夹(默认找这里面的页面)创建login.html <!DOCTYPEhtml><htmlxmlns:th="http://www.thymeleaf.org"><head>  <metacharset="UTF-8">  <title>static中的login</title></hea......
  • 在线CAD SDK前端库绘制规则多边形图形
    前言在CAD(计算机辅助设计)领域,绘制多边形是常见的任务之一。MxCAD是一款专注在线CAD的前端库,提供了丰富的绘图和设计功能,使得绘制多边形变得轻松而灵活。本文将带领您通过使用MxCAD实现绘制多边形的过程,深入了解其基本概念和功能。mxcad 是一个基于TypeScript的前端库,专为......
  • javascript postMessage给子页面发消息
    发送消息页面<!DOCTYPEhtml><html><head><title>demo</title><metacharset="utf-8"/><script>varchildwinconstchildname="popup"functionopenChild(){......
  • 前端大文件上传如何做到刷新续传?
    前言这两天在学习阿里云oss上传。踩了不少坑,终于实现了大文件分片、断点续传的功能。这篇文章主要分享学习笔记,希望能给大家一些帮助。先看效果 技术栈1.前端:react+Ts+axios上传文件2.Node部分:定义接口、阿里云oss3.socket.io:实时同步上传进度特别说明axios中onUploadPr......
  • 前端如何实现大文件上传
    在开发过程中,经常会遇到一些较大文件上传,如果只使用一次请求去上传文件,一旦这次请求中出现什么问题,那么无论这次上传了多少文件,都会失去效果,用户则需要重新上传所有资源。所以就想到一种方式,将一个大文件分成多个小文件,这样通过多个请求实现大文件上传。接下来我们就来看看具体是怎......
  • vue+pdfh5实现将pdf渲染到页面上
    版本:[email protected]+.netCore6.0webapi方法一:通过访问后端获取二进制数据来渲染前端渲染<template><vol-boxref="box":width="width":height="height"><divid="demo"ref="render"></div></vol......
  • 全栈工程师必须要掌握的前端Html技能
    作为一名全栈工程师,在日常的工作中,可能更侧重于后端开发,如:C#,Java,SQL,Python等,对前端的知识则不太精通。在一些比较完善的公司或者项目中,一般会搭配前端工程师,UI工程师等,来弥补后端开发的一些前端经验技能上的不足。但并非所有的项目都会有专职前端工程师,在一些小型项目或者初创公......