位置: 编程技术 - 正文

理解Javascript图片预加载(js图形界面)

编辑:rootadmin

推荐整理分享理解Javascript图片预加载(js图形界面),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js图形界面,javascript的图片,js怎么理解,javascript原理详解,javascript 图像处理,javascript详解,javascript高效图形编程,javascript的图片,内容如对您有帮助,希望把文章链接给更多的朋友!

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速、无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验。本文将分享三个不同的预加载技术,来增强网站的性能与可用性。

方法一:用CSS和JavaScript实现预加载

实现预加载图片有很多方法,包括使用CSS、JavaScript及两者的各种组合。这些技术可根据不同设计场景设计出相应的解决方案,十分高效。

单纯使用CSS,可容易、高效地预加载图片,代码如下:

将这三个ID选择器应用到(X)HTML元素中,我们便可通过CSS的background属性将图片预加载到屏幕外的背景上。只要这些图片的路径保持不变,当它们在Web页面的其他地方被调用时,浏览器就会在渲染过程中使用预加载(缓存)的图片。简单、高效,不需要任何JavaScript。

该方法虽然高效,但仍有改进余地。使用该法加载的图片会同页面的其他内容一起加载,增加了页面的整体加载时间。为了解决这个问题,我们增加了一些JavaScript代码,来推迟预加载的时间,直到页面加载完毕。代码如下:

在该脚本的第一部分,我们获取使用类选择器的元素,并为其设置了background属性,以预加载不同的图片。

该脚本的第二部分,我们使用addLoadEvent()函数来延迟preloader()函数的加载时间,直到页面加载完毕。

如果JavaScript无法在用户的浏览器中正常运行,会发生什么?很简单,图片不会被预加载,当页面调用图片时,正常显示即可。

方法二:仅使用JavaScript实现预加载

上述方法有时确实很高效,但我们逐渐发现它在实际实现过程中会耗费太多时间。相反,我更喜欢使用纯JavaScript来实现图片的预加载。下面将提供两种这样的预加载方法,它们可以很漂亮地工作于所有现代浏览器之上。

JavaScript代码段1

只需简单编辑、加载所需要图片的路径与名称即可,很容易实现:

该方法尤其适用预加载大量的图片。我的画廊网站使用该技术,预加载图片数量达多张。将该脚本应用到登录页面,只要用户输入登录帐号,大部分画廊图片将被预加载。

JavaScript代码段2

该方法与上面的方法类似,也可以预加载任意数量的图片。将下面的脚本添加入任何Web页中,根据程序指令进行编辑即可。

正如所看见,每加载一个图片都需要创建一个变量,如“img1 = new Image();”,及图片源地址声明,如“img3.src = "../path/to/image-.gif";”。参考该模式,你可根据需要加载任意多的图片。

我们又对该方法进行了改进。将该脚本封装入一个函数中,并使用 addLoadEvent(),延迟预加载时间,直到页面加载完毕。

方法三:使用Ajax实现预加载

理解Javascript图片预加载(js图形界面)

上面所给出的方法似乎不够酷,那现在来看一个使用Ajax实现图片预加载的方法。该方法利用DOM,不仅仅预加载图片,还会预加载CSS、JavaScript等相关的东西。使用Ajax,比直接使用JavaScript,优越之处在于JavaScript和CSS的加载不会影响到当前页面。该方法简洁、高效。

上面代码预加载了“preload.js”、“preload.css”和“preload.png”。毫秒的超时是为了防止脚本挂起,而导致正常页面出现功能问题。

下面,我们看看如何用JavaScript来实现该加载过程:

这里,我们通过DOM创建三个元素来实现三个文件的预加载。正如上面提到的那样,使用Ajax,加载文件不会应用到加载页面上。从这点上看,Ajax方法优越于JavaScript。

补充:加载完毕回调函数

我们写出下面的代码:

在firefox中测试一下,发现不错,果然和预想的效果一样,在图片下载后,就会弹出图片的宽度来。无论点击多少次或者刷新结果都一样。

不过,做到这一步,先别高兴太早——还需要考虑一下浏览器的兼容性,于是,赶紧到ie里边测试一下。没错,同样弹出了图片的宽度。但是,再点击load的时候,情况就不一样了,什么反应都没有了。刷新一下,也同样如此。

经过对多个浏览器版本的测试,发现ie6、opera都会这样,而firefox和safari则表现正常。其实,原因也挺简单的,就是因为浏览器的缓存 了。当图片加载过一次以后,如果再有对该图片的请求时,由于浏览器已经缓存住这张图片了,不会再发起一次新的请求,而是直接从缓存中加载过来。对于 firefox和safari,它们视图使这两种加载方式对用户透明,同样会引起图片的onload事件,而ie和opera则忽略了这种同一性,不会引 起图片的onload事件,因此上边的代码在它们里边不能得以实现效果。

怎么办呢?最好的情况是Image可以有一个状态值表明它是否已经载入成功了。从缓存加载的时候,因为不需要等待,这个状态值就直接是表明已经下载了,而从http请求加载时,因为需要等待下载,这个值显示为未完成。这样的话,就可以搞定了。

经过一些分析,终于发现一个为各个浏览器所兼容的Image的属性——complete。所以,在图片onload事件之前先对这个值做一下判断即可。最后,代码变成如下的样子:

虽然代码很简单,但却很实用。

附:再谈javascript图片预加载

lightbox类效果为了让图片居中显示而使用预加载,需要等待完全加载完毕才能显示,体验不佳(如filick相册的全屏效果)。javascript无法获取img文件头数据,真的是这样吗?本文通过一个巧妙的方法让javascript获取它。

这是大部分人使用预加载获取图片大小的例子:

上面必须等待图片加载完毕才能获取尺寸,其速度不敢恭维,我们需要改进。

web应用程序区别于桌面应用程序,响应速度才是最好的用户体验。如果想要速度与优雅兼得,那就必须提前获得图片尺寸,如何在图片没有加载完毕就能获取图片尺寸?

十多年的上网经验告诉我:浏览器在加载图片的时候你会看到图片会先占用一块地然后才慢慢加载完毕,并且不需要预设width与height属性,因为浏览器能够获取图片的头部数据。基于此,只需要使用javascript定时侦测图片的尺寸状态便可得知图片尺寸就绪的状态。

当然实际中会有一些兼容陷阱,如width与height检测各个浏览器的不一致,还有webkit new Image()建立的图片会受以处在加载进程中同url图片影响,经过反复测试后的最佳处理方式:

调用例子:

是不是很简单?这样的方式获取摄影级别照片尺寸的速度往往是onload方式的几十多倍,而对于web普通(×内)浏览级别的图片能达到秒杀效果。

Javascript类型转换的规则实例解析 类型转换可以分为隐式转换和显式转换,所谓隐式转换即程序在运行时进行的自动转换,显式转换则是人为的对类型进行强制转换。Javascript的变量是松散

javascript实现九宫格相加数值相等 本文实例介绍了javascript实现九宫格的对应方法,分享给大家供大家参考,具体内容如下实现思路:1、每个格子输入的数值必须为数字;2、输入数值不

JavaScript中的闭包 1、什么是闭包闭包,官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一

标签: js图形界面

本文链接地址:https://www.jiuchutong.com/biancheng/380332.html 转载请保留说明!

上一篇:JS更改select内option属性的方法(js selectionchange)

下一篇:Javascript类型转换的规则实例解析(javascript中的类型转换)

  • 个体工商户的免税政策
  • 食堂没有发票怎么做账
  • 财务汽车折旧年限的最新规定2020
  • 收到投资款的会计科目
  • 金税盘地区编号淄博
  • 留抵进项税额
  • 1元换购怎么做账
  • 单位注销合并时在原单位各个账户余额保留
  • 固定资产已入账怎么冲销
  • 购置股权账务处理流程
  • 印花税是填开票金额吗
  • 成品油消费税征税
  • 不抵扣的发票怎么导入做账系统
  • 事业单位什么情况下可以提前退休
  • 非同一控制下企业合并的交易费用
  • 国际货运代理免税怎么做账
  • 发放活动奖金支出怎么入账
  • 小规模给个人开普票怎么填写
  • 滴滴电子发票怎么填写
  • 一般纳税人有什么区别
  • 在windows七中
  • 定向增发是什么融资方式
  • win7的文件系统
  • 现金发放的餐补算工资么
  • linux7 nfs
  • 未办理土地使用权证房屋买卖 案例
  • 银行存款的明细科目怎么写
  • php怎么与mysql连接
  • 月末结转本年利润怎么算
  • 建筑工程甲级什么意思
  • 商业汇票转让后,能否追索前手
  • k8s安装步骤
  • 工程项目出纳
  • win11装双系统虚拟机mac
  • 命令行修改mac地址
  • 数学建模python 怎么用
  • mongodb的redo日志为
  • 收到员工交来现金怎么入账
  • 模具费收入计入什么科目
  • 如何恢复sql server误删除的数据库
  • 其他应收款借方表示增加吗
  • 企业给员工的福利体检报告
  • 公司买的茶叶怎么入账
  • 税控盘买了怎么用
  • 无追索权保理的例外
  • 提出行政复议是否可以暂停拘留
  • 专项应付款如何记账
  • 电费发票没有谷段电费
  • 公关费用计入什么科目比较好
  • 个人与公司交易需要纳税吗
  • 申购费从哪里扣
  • 资产负债表的作用体现在哪些方面
  • 年终奖个税计税方式
  • 取得的政府补助收入计入
  • 社保个人部分如何继承
  • 天猫佣金会返还吗
  • 固定资产损失计入什么科目
  • 支付银行手续费等直接收费金融服务
  • 我国开征股票交什么税
  • 为什么要依法管理
  • 浅谈mysql explain中key_len的计算方法
  • sar 命令
  • win10怎么关闭securboot
  • 如何在linux系统中创建空文件
  • edge新版浏览器
  • windows wps
  • vps可以安装虚拟机吗
  • js中date对象
  • unity 插件开发
  • unityai寻路
  • python pyb库
  • Unity3D游戏开发(第2版)
  • Node.js Mongodb 密码特殊字符 @的解决方法
  • 安卓快速开发平台
  • 查汽车发票从哪个网站查
  • 南阳市税务稽查局举报电话
  • 200平交多少契税
  • 北京密云十里堡镇河漕社区卫生服务站
  • 个税已申报税额为0是什么意思
  • 福安少数民族姓氏
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设