位置: 编程技术 - 正文

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

  • 资金账簿印花税减半征收后可以叠加享受优惠吗
  • 什么是增值税的混合销售行为
  • 小规模纳税人增值税减免账务处理
  • 税率的具体形式
  • 一般纳税人所得税是季报还是月报
  • 影响固定资产折旧的基本因素
  • 转增股如何计算资本公积金?
  • 广告传媒公司安全生产标准化
  • 或有负债记入哪个科目?
  • 增值税专用发票有效期是多长时间
  • 怎么网上补报以前年度的个人所得税?
  • 物业费收入的增值税税率是多少
  • 三方协议是先签先干活
  • 异地预缴增值税后本地还要交吗
  • 文化传媒公司的经营模式怎么写
  • 小规模纳税申报表下载
  • 小规模季度30万免税怎么做账
  • 出差伙食补贴没发
  • 财产转让所得个人所得税纳税地点
  • 删除打印机如何添加
  • win10更新失败怎么回事
  • php获取文件内容的函数
  • PSof1.exe - PSof1是什么进程 有什么作用
  • 松木山在哪
  • Win10 Build 19044.1288累积更新补丁KB5006670(附更新修复内容汇总)
  • php打开文件读取内容
  • 桌面级cpu天梯图快科技
  • 客户预付的购货款是收入吗
  • windows 11 正式版实际使用体验如何?
  • 预缴企业所得税怎么做账务处理
  • 解决安装后软件icon一圈白边问题
  • laravel怎么用
  • 餐饮手撕票在哪里买多少钱
  • 学堂在线结课后还能看吗
  • 变量与数据
  • head -1命令
  • 小规模企业应交税费
  • 三代手续费的税率
  • 学习笔记——Servlet
  • php的默认网站目录是
  • php发邮件系统源码
  • 农民专业合作组织法律制度的类型包括哪些?
  • d级企业预缴增值税如何申报
  • 在建工程账务处理会计分录
  • 金税四期的政策
  • 技术服务收入属于销售营业收入吗
  • 上年亏损次年赢亏怎么算
  • 房地产企业出售商铺交什么税
  • 产业扶持资金管理办法
  • 土地管理费属于什么费用
  • 计提附加税金额
  • 低值易耗品的金额
  • 建筑业确认收入的条件
  • 赠送客户的商品怎么入账
  • mac上怎么取消itunes自动续费
  • centos如何下载
  • centos基本操作
  • linux用户权限管理
  • 电脑windows8怎么样
  • window八
  • windows8怎么设置开机启动项
  • win10系统怎么锁定屏幕
  • linux的shm共享内存
  • android常用命令
  • python入门笔记
  • 超详细的!!!2023澳门六开彩
  • 批处理文件
  • js判断符
  • python在windows
  • jquery的点击事件怎么写
  • unity3d documentation
  • javascript面向对象精要pdf下载
  • 外经证预缴税款网上流程
  • 上海市网上税务局登录
  • 税控盘离线开票时间超限是怎么回事
  • 畜牧业企业所得税优惠政策最新
  • 内蒙古国地税联合办税服务厅
  • 12366纳税服务热线存在的问题
  • 武汉二手房交易信息
  • 税务师 领证
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设