位置: 编程技术 - 正文

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

  • 发票遗失如何入账
  • 严格财务报销程序
  • 51电子发票客户端后使用教程
  • 未及时扣除的分数怎么算
  • 住房公积金部分业务暂停办理
  • 月末在产品和产成品计算
  • 内部企业借款利息在建工程资本化
  • 房屋租赁合同税率怎么算
  • 公司车辆交强险需要什么手续
  • 个税中的其他所得税
  • 工程领用工程物资180万元
  • 关于一般纳税人提供非学历教育服务适用简易计税
  • 自然人出租房屋房产税
  • 购买理财产品会损失本金吗
  • 视同销售产品与收款尾差怎么处理
  • 卖仪表赚钱吗
  • 资产基金科目如何选择
  • 进项税和销项税的借贷方向
  • 国税申报纳税调整项目怎么填的?
  • 企业的营业外收入包括
  • 农业机耕服务是什么税收分类编码
  • 季度财务报表怎么打印
  • 进项发票抵扣范围
  • 石油天然气用途
  • vivo手机可以安装鸿蒙
  • 超市打折优惠
  • Linux怎么使用Windows的软件
  • mom.exe是什么进程
  • 银行对公账户收款码手续费多少
  • 建筑业成本率是多少
  • php获取网站内容
  • php面向对象的理解
  • 公户发工资必须是员工账号必须是公户开户行吗
  • 什么叫含税和未含税区别
  • html 提交表单
  • 喰种小说在线阅读
  • css选择器详解
  • 存货跌价准备科目余额在哪方
  • 企业缴纳水利建设基金的依据是什么
  • 增值税发票货物名称要求
  • vue 鼠标移入移出(hover)切换显示图片问题
  • 个人所得税年底退税 可以退多少
  • 长期待摊费用是什么意思
  • sql参数是什么意思
  • SQL SERVER 2008 R2 重建索引的方法
  • 母公司合并子公司报表
  • 政府补贴需要缴纳印花税吗
  • 建筑服务包括哪些内容
  • 2020年混凝土增值税税率是多少
  • 以固定资产投资取得长期股权投资
  • 贷款调查的主要内容
  • 小规模纳税人购入货物收到增值税专用发票
  • 嵌入式软件产品应纳税额
  • 企业所得税如何规避
  • 不能抵扣的福利费
  • 营改增后增值税增加了什么征收范围
  • 材料成本差异怎么做分录
  • 餐饮企业原材料采购描述错误的是
  • 公司半年后交五险合法吗
  • 暂估入账会计科目
  • 收取加盟费的账户是什么
  • 加计抵减10%政策适用范围
  • 港口建设费收费标准
  • 事业单位可以报考事业单位吗
  • 预收账款可以挂在应收账款
  • sql server错误代码1608
  • 一些有用的sql语句是什么
  • 服务器上文件共享
  • 流言:Win9或终止32位系统 加速64位平台
  • win7系统打开网络看不到其他电脑
  • 多个网页怎么从一个网页中显示
  • linux怎么禁用用户
  • win7网络正常但是所有浏览器网页打不开
  • 有usb3.0驱动的win7
  • win8怎么到win7
  • 查看shell脚本是否在运行
  • javascript高级程序设计电子书
  • 个人所得税申报怎么申报
  • 印花税怎么计提和结转
  • 不动产契税怎么计算出来的
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设