关于图片预加载的思考

引子:

很多时候,我们在写html页面的时候,当需要在页面中加入图片时,我们很自然地把图片直接用<img>标签放在了<body>里面,这本来是没有多大问题的。

但是当图片数量很多的时候,问题就来了。Html页面在被解析器解析的时候要不断去寻找图片的路径去加载图片,而这些图片不一定所以都会被用户通过触发一些类似点击的操作所看到。这样,一些不必要的图片预加载就会拉长了页面的加载时间,带来的用户体验是不好的。

为了解决这个性能问题,有一个比较好的解决问题就是用js去延迟图片预加载。那么具体的实现过程是怎样的呢?

我先把我实现的代码放在下面:

<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
<style>body{position:relative;text-decoration: none;list-style: none;}.showpic{position:absolute;height:550px;width:90%;margin-left:80px;background-color: black;}.button-box{position: absolute;margin-top:560px;margin-left: 600px;z-index: 5;}.preload{position: fixed;height: 100%;width:100%;top:0;background-color: white;display: none;}img{position: absolute;margin-left: 30px;margin-top: 3px;}button{height: 30px;width:80px;font-size: 10px;}
</style>
<script  src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head><body><div class="showpic"><img src="img/pexels-photo-297814.jpeg" id="img"></div><div class="button-box"><button type="button" value="前一张"  data-control="prev" class="button">前一张</button><button type="button" value="后一张"  data-control="next" class="button">后一张</button></div><div class="preload"></div><script type="text/javascript" src="js/preload.js"></script>
</body>
</html>$(document).ready(function(){var imgs = ["img/pexels-photo-297814.jpeg","img/pexels-photo-465445.jpeg","img/pexels-photo-619948.jpeg","img/pexels-photo-620336.jpeg","img/pexels-photo-885746.jpeg","img/pexels-photo-886109.jpeg","img/pexels-photo-888994.jpeg"];var  index = 0,len =imgs.length;$(".button").on("click",function(){if($(this).data('control')=== "prev"){index = Math.max(0,--index);}else{index = Math.min(len-1,  index);}$("#img").attr("src",imgs[index]);});});

 

 

 

 

这个案例我是要实现通过点击按钮实现图片的展示过程。显然,我在<div class="showpic">盒子的<img>标签里面只是放了一张图片(避免页面打开是什么也没有),并没有把全部可以展示的图片都放在盒子里面。因为这样势必会加大web浏览器解析html页面的压力。

我把这些图片的所有搜索路径的放在了js代码中,并通过修改src属性的方法来更新<img>标签,其中我还用到了html的data属性来自定义点击按钮的类型,并通过在js中获取这个data值来确定图片路径的更改。

这样的实现,就比较有利于减轻html页面解析过程中对浏览器解析器的压力。

 

本文转载于:猿2048➞https://www.mk2048.com/blog/blog.php?id=ijckjaa&title=关于图片预加载的思考

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370673.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

oracle安装中桌面模式与服务器模式的去别

桌面模式只能本机使用。 服务器模式可以在网络中使用&#xff0c;也就是网络中的其他服务器可以使用。 所以安装时&#xff0c;如果是生产环境肯定是服务器模式。一般也都是服务器模式。 转载于:https://www.cnblogs.com/zhjx0521/p/7803691.html

python不能创建字典的是_用Python创建带有重复键的字典

用Python创建带有重复键的字典 我有以下列表&#xff0c;其中包含重复的具有不同值的汽车注册号。 我想将其转换为字典&#xff0c;该字典接受汽车登记号的多个键。 到目前为止&#xff0c;当我尝试将列表转换为字典时&#xff0c;它消除了键之一。 如何制作具有重复键的字典&a…

python中int是什么的缩写_python中int是什么类型

python中的基本数据类型1:虽然python中的变量不需要声明&#xff0c;但使用时必须赋值整形变量浮点型变量字符型2:可以一个给多个变量赋值&#xff0c;也可以多个给多个变量赋值3:python3中有6个标准数据类型Number(数字)*True1*False0*数值的除法(/)总是返回一个浮点数&#x…

redis cli命令

redis安装后&#xff0c;在src和/usr/local/bin下有几个以redis开头的可执行文件&#xff0c;称为redis shell&#xff0c;这些可执行文件可做很多事情。 可执行文件作用redis-server 启动redisredis-cliredis命令行工具redis-benchmark基准测试工具redis-check-aofAOF持久化文…

高级ZK:异步UI更新和后台处理–第2部分

介绍 在第1部分中&#xff0c;我展示了如何在ZK应用程序中使用服务器推送和线程来执行后台任务。 但是&#xff0c;这个简单的示例具有一个重大缺陷&#xff0c;这使其对于实际应用程序而言是一种不好的方法&#xff1a;它为每个后台任务启动了一个新线程。 JDK5引入了Execut…

css清除浮动的原理

最近学习css发现了高度塌陷时候要清除浮动,为了理解清楚浮动原理,网上找了不少资料,发现都写的不是很清楚,而且都是一模一样的内容,我在里分享一下我对清楚浮动原理的理解, 如果你已经很了解什么是浮动和浮动的效果你可以直接跳转到三.如何清除浮动(重点)阅读 一.什么是浮动首…

SpringBoot03 项目热部署

1 问题 在编写springBoot项目时&#xff0c;经常需要修改代码&#xff1b;但是每次修改代码后都需重新启动&#xff0c;修改的代码才会生效 2 这么实现IDEA能够像Eclipse那样保存过后就可以自动进行刷新呢 将springBoot项目进行热部署即可 3 如何实现SpringBoot项目的热部署01 …

STM32实现流水灯

led.c #include"led.h"void Led_Init(void) {GPIO_InitTypeDef GPIO_VALUE; //???RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOC,ENABLE);//???GPIO_VALUE.GPIO_ModeGPIO_Mode_Out_PP;//???? ????GPIO_VALUE.GPIO_PinGPIO_Pin_1|GPIO_Pin_2|GPIO_Pin_…

jacob 报错 Can't co-create object

问题&#xff1a;开始时一切正常&#xff0c;后来什么都没该&#xff0c;出现Cant co-create object报错&#xff0c;即是创建不了ActiveXComponent wdnew ActiveXComponent("Word.Application"); 偶尔发现任务管理器中word进程居然达到10个&#xff0c;而我没有打开…

map分组后取前10个_map根据属性排序、取出map前n个

/*** map根据value排序* flag 1 正序* flag 0 倒序** param map* param flag* return*/public static > LinkedHashMap sortByValue(Map map, int flag) {LinkedHashMap sortMap new LinkedHashMap<>();if (flag 1) {map.entrySet().stream().sorted(Comparator.c…

wxpython可视化_使用wxPython的绘图模块wxPyPlot进行数据可视化

[Python进阶(四十)-数据可视化の使用matplotlib进行绘图前言  matplotlib是基于Python语言的开源项目&#xff0c;旨在为Python提供一个数据绘图包。我将在这篇文章中介绍matplotlib A #-*- coding: utf-8 -*- ############################################################…

在Java EE 6中将Bean验证与JAX-RS集成

JavaBeans验证&#xff08;Bean验证&#xff09;是一种新的验证模型&#xff0c;可作为Java EE 6平台的一部分使用。 约束条件支持Bean验证模型&#xff0c;该约束以注释的形式出现在JavaBeans组件&#xff08;例如托管Bean&#xff09;的字段&#xff0c;方法或类上。 javax.…

如何让浮动的元素换行??css

当你想要做成这种布局效果的时候 紫色框里面的内容那样 它是一个列表 li元素是块级元素 默认大小是父元素ul的宽 并且换行 如果li没有背景的话那就不用管了 可是问题来了它不但有背景 而且是根据文字自适应的宽高 这就是inline-block类型的功能了 那么想让li是inline-bl…

Python学习之类和实例

面向对象最重要的概念就是类&#xff08;Class&#xff09;和实例&#xff08;Instance&#xff09;&#xff0c;必须牢记类是抽象的模板&#xff0c;比如Student类&#xff0c;而实例是根据类创建出来的一个个具体的“对象”&#xff0c;每个对象都拥有相同的方法&#xff0c;…

解决sublime里面的vue高亮的问题

下载插件文件&#xff1a;https://github.com/vuejs/vue-syntax-highlight 直接在官网下载放在安装时候的packages目录下&#xff08;sublime text3\Sublime Text3\Data\Packages&#xff09; 在Packages文件夹下新建一个vue的文件&#xff0c;把第一步下载的文件复制进去 subl…

python矩形填充颜色_在Python中找到所有用0填充的矩形

假设我们有一个二进制2D矩阵&#xff0c;现在我们必须找到所有用0填充的矩形的起点和终点。我们必须牢记&#xff0c;矩形是分开的&#xff0c;彼此之间不接触&#xff0c;但是它们可以接触阵列边界。仅包含单个元素的矩形也是可能的。所以&#xff0c;如果输入像-101110111011…

python concat_python中merge、concat用法

转载&#xff1a;https://blog.csdn.net/ly_ysys629/article/details/73849543 参考&#xff1a;https://blog.csdn.net/stevenkwong/article/details/52540605 数据规整化&#xff1a;合并、清理、过滤 pandas和python标准库提供了一整套高级、灵活的、高效的核心函数和算法将…

Vue使用axios无法读取data的解决办法

今天发现Vue中使用了axios后&#xff0c;then方法中无法读取到data中的数据了&#xff0c;总是提示 Cannot set property xxx of undefined 上网找了一圈后发现了一下解决方法。 解决办法1&#xff1a; methods:{tap:function(){var selfthis;axios.get(xxxxxx).then(function(…

设置博客园标题样式

1.向博客园申请js权限 我们需要进入博客园自定义博客模板的页面&#xff0c;向博客园管理团队申请页面运行js的权限。【博客园】->【设置】->【博客设置】&#xff0c;点击页面上的js权限申请&#xff0c;然后填写申请的理由&#xff0c;耐心等几分钟&#xff0c;再刷新一…

Spring 3.1 –从数据库加载XML配置的属性

Spring使通过其PropertyPlaceholderConfigurer和&#xff08;Spring 3.1之前&#xff09;PropertySourcesPlaceholderConfigurer&#xff08;Spring 3.1&#xff09;从属性文件中获取的值易于注入。 这些类实现了BeanFactoryPostProcessor接口&#xff0c;该接口使它们能够在初…