位置: 编程技术 - 正文

理解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中的类型转换)

  • 缴纳附加税会计科目怎么做
  • 税务uk开票人显示是管理员怎么改
  • 折扣折让属于什么科目
  • 货车的折旧年限怎么算
  • 房地产企业可以贷款吗
  • 单位装修质保金扣留的会计处理
  • 转租不动产需要预缴增值税吗
  • 多计提的应收账款如何调整
  • 银行贷款利息从几点计算
  • 修理费没有发票怎么做账
  • 人力资源公司劳务派遣怎么收费
  • 工程预付款的规定
  • 网站服务器使用什么IP地址
  • 防洪费计税基础
  • 外贸出口退税是退出口金额的多少
  • 发票章盖收据会被税务局罚款吗
  • 个人抬头的医药费可以进费用吗
  • 企业合并以外
  • 地税局完税证明去哪里办理
  • 财务部水电费会计分录
  • 业务奖金激励制度
  • 外购已税化妆品生产的护肤护发品
  • 如何关闭edge浏览器下载保护
  • 停薪留职单位欠缴社保怎么处理
  • 汽车零部件的成本核算
  • 总公司中标分公司签约
  • 设备维保费计算标准
  • 股份制企业的特征主要是什么
  • windows11正式版好用吗
  • springboot+vue+elementsUI 实现分角色注册登录界面
  • 什么是动态表单
  • 支付的招标代理费计入成本还是费用
  • php str_split
  • php分页技术
  • 国内旅客运输服务发票
  • 出售债券税费处理会计分录怎么写
  • springboot aop切面
  • php封装数据库操作
  • 现代服务包括哪些税目
  • 技术研发费用包括哪些
  • 超市的购物卡以什么为准
  • 分公司要所得税汇算吗
  • mysql中触发器的创建有多个执行语句
  • excel表格复杂表头
  • 应收保费核算什么业务
  • 国家研发费用补助
  • 企业分配的股票股利宣告发放
  • 出口企业出口退税流程
  • sqlserver2012安装好了桌面没有图标
  • 销项税额和进项税额月底怎么结转
  • 分公司能不能作为行政处罚的主体
  • 固定资产办理竣工结算之后的处理方式
  • 以前年度多交增值税账务处理
  • 注册资本认缴与注册登记实操
  • 预收账款和预付账款都属于负债类科目
  • ktv行业账务处理
  • 资产负债表货币资金怎么填
  • 行政事业单位支出范围和标准
  • 开户一定要去银行吗
  • 资产减值损失会计处理
  • 上次年检怎么查
  • 银行存款日记账电子表格模板
  • mysql怎么实现
  • mysql怎么实现
  • win8windows设置在哪里
  • ubuntu安装指南
  • linux中使用最多的命令
  • mmc.exe是什么
  • windos8怎么样
  • linux常用的网络命令
  • unity3d快速入门
  • 在shell脚本中$用于
  • Unity3D之iTween
  • python tcp连接
  • 成都国家税务局每个月交全民付的钱是什么
  • 车辆购置税查询不到
  • 如何电子税务局缴纳社保费用
  • 深两优3117审定号
  • 基层税务稽查具体内容
  • ipo上市要注意什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设