位置: 编程技术 - 正文

理解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
  • 没有对公账户怎么办
  • 向股东分配股利会影响所有者权益吗
  • 公司0申报怎么做账
  • xp系统怎么删除打印机驱动程序
  • 应交所得税的计算公式excel
  • linux系统查询mac地址命令
  • 涉税专业服务机构是什么
  • 增值税常见账务处理方法
  • 小规模纳税人每月申报什么税
  • mlp是啥啊
  • vue开发环境配置
  • linuxshel
  • 购买超市购物卡会计分录
  • 增票的纳税人识别号是啥
  • 清单发票填开注意事项
  • 法人想从公司户提钱自己用有事吗
  • 应交税费为负数要调整吗
  • java printing
  • 改造后的固定资产入账价值
  • SQL server 2008安装程序遇到以下错误 sku
  • 一般纳税人销售货物税率
  • 实收资本报表怎么填
  • 工地上购买的零食叫什么
  • 小规模公司累计增值税
  • 非营利组织的一般战略是
  • 财务报告编制原则
  • 少做收入第二年怎么算
  • 库存结转成本如何计算
  • 哪些行业不适用作业法
  • 金融资产或金融负债初始入账价值
  • 旅行社的代订机票产品能报销吗
  • 锁mysql
  • freebsd安装手动分区
  • windows累积更新
  • 任务栏图标右键
  • xp电脑小游戏
  • windows7关机点了没反应
  • linux安装dns软件包
  • win10每周更新
  • opengl画点
  • perl入门
  • unity脚本编写教程
  • 原生封装ajax
  • vue2里面ref的具体使用方法
  • Python装饰器实现几类验证功能做法实例
  • listary 替代
  • python模拟软件
  • javascript教程 csdn
  • python怎么自定义函数
  • 银行开业送什么花
  • 重庆电子税务局电话人工客服电话
  • 济南市中区税务局办税大厅
  • 汽车修理厂24小时修理
  • 江苏税务缴费小程序
  • 普通手写发票税点多少
  • 公司租商铺
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设