实现图片懒加载(及优化相关)

工作之余想要休闲一下(看-美-女-图),但是又觉得单纯休闲不利于自身进步,于是……

大家好,又见面了,我是你们的朋友全栈君。

内容介绍

  工作之余想要休闲一下(看-美-女-图),但是又觉得单纯休闲不利于自身进步,于是 ……

  首先,简单说一下 懒加载 和 预加载 ,两者都能提升用户体验。

1、懒加载

  当客户端首屏不需要展示的图片,可以先不进行图片数据的请求,当图片的结构进入可视区域的时候,让这张图片进行显示监听scroll滚动,当滚动的距离 +首屏的高度 >元素距离浏览器顶端的高度值时,让图片进行显示。

2、预加载

  幻灯片、相册等,可以使用图片预加载,将当前展示图片的前一张和后一张优先下载。初始化的时候获得图片的src之后为每一个元素提前添加图片的地址路径。保证在第二张图片显示的时候已经加载到页面当中.(应用于轮播、相册、幻灯片等图片需要进行切换显示的地方)。

一、效果展示

在这里插入图片描述

? ? ? ? ?

在这里插入图片描述
? ? ? ? ?

图片懒加载演示视频

二、实现代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<title>图片懒加载</title>
<style> * { 
 margin: 0; padding: 0; } .img-wp { 
 width: 765px; margin: 0 auto; } </style>
</head>
<body>
<div class="img-wp">
<!-- 使用data-*属性存放图片路径 -->
<!-- src 属性可为空,或放小图 -->
<img src="" data-src="./img/1.jpeg" alt="" width="765" height="574">
<img src="" data-src="./img/2.jpeg" alt="" width="765" height="574">
<img src="" data-src="./img/3.jpeg" alt="" width="765" height="574">
<img src="" data-src="./img/4.jpeg" alt="" width="765" height="574">
<img src="" data-src="./img/5.jpeg" alt="" width="765" height="574">
<img src="" data-src="./img/6.jpeg" alt="" width="765" height="574">
</div>
<script> ! function(window, document, $, undefined) { 
 // 页面滚动时触发 function lazyScroll() { 
 $('img').each(function(index, item) { 
 let bTop = $(this).offset().top; let scrollHeight = $(':root').scrollTop(); let screenHeight = window.innerHeight; // 滚动区域及可视范围进行判断 if ((scrollHeight + screenHeight) > bTop) { 
 $(this).attr('src', $(this).data('src')) } }) } // 页面加载完成时执行一次 lazyScroll() $(window).on('scroll', lazyScroll) }(window, document, jQuery) </script>
</body>
</html>

三、优化相关

以上代码案例仅作为简单实现,实际使用中可以进行封装和优化,列举几栗:

  • 已经懒加载完成的元素添加指定class类名,防止重复监听
  • 使用防抖函数,控制触发频率
  • 使用getboundingClientRect或IntersectionObserver(性能较好,但是有兼容性问题)
  • jquery.lazyload.js

标签:JavaScript,jQuery,图片懒加载


更多演示案例,查看 案例演示


欢迎评论留言!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/125718.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Jenkins(8)构建触发器之定时构建和轮询 SCM[通俗易懂]

    Jenkins(8)构建触发器之定时构建和轮询 SCM[通俗易懂]前言跑自动化用例每次用手工点击jenkins出发自动化用例太麻烦了,我们希望能每天固定时间跑,这样就不用管了,坐等收测试报告结果就行。jenkins的定时任务是用的crontab语法定时构建语法

  • 走过的laravel-admin 的坑

    走过的laravel-admin 的坑

    2021年10月21日
  • Linux下解压rar文件

    Linux下解压rar文件[本地环境]操作系统:Ubuntu14.0464bitsLinux操作系统环境下不支持rar文件的解压,需要安装rar压缩文件的Linux版本,下载地址:http://www.rarlab.com/download.htm下载后进入解压目录下,进行安装:rar的解压命令如下:#将*****.rar压缩文件解压到当前文件目录rare*****.r

  • wcopy nfc pro智能读卡工具软件_手机NFC复制小区用的门禁卡[通俗易懂]

    wcopy nfc pro智能读卡工具软件_手机NFC复制小区用的门禁卡[通俗易懂]我们说一说目前的门禁卡到底有哪些类型呢?门禁卡一般分为:ID卡和IC卡。而EM卡、M1卡、CPU卡等等,都是这两种卡的细分。它们能够开门,都是基于RFID感应的原理来实现开门的。我们看一张图,在这张图中,能够看到一个数据名词,频率:ID卡的工作频率为125KHz频率,而IC卡的工作频率为13.56MHz,显然因为IC卡的频率高,所以,它的安全性比较高。小区基本上选择IC卡的概率会更高一…

  • Android微信开放平台,申请移动应用 获取应用签名的方法

    Android微信开放平台,申请移动应用 获取应用签名的方法

  • 如何卸载干净JAVA?「建议收藏」

    如何卸载干净JAVA?「建议收藏」有很多小伙伴下载了JAVA的JDK(java开发工具包)并安装成功运行后,发现自己下错了版本。凉了,半天白搞了。卸载之后又发现在再安装出现安装不了的问题。这往往是因为JAVA并没有卸载完全。今天我们就看看如何完全卸载JAVA。JAVA卸载有两种方式。手动和用JAVA卸载工具。第一种,手动。1.打开控制面板,找到卸载程序,在找到java的程序,并卸载。2.这样之后,java虽然看不见了。但是还没有卸载干净。打开命令行窗口,输入命令regited。打开注册表窗口,删除ja…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号