关于图片onload事件兼容性处理

阐述:

一个小demo,关于canvas 绘制 大转盘 和指针,当同时各自添加onload事件指针图片突发性不显示.

兼容性问题-浏览器版本: 谷歌浏览器版本 56.0.2896.3 (64-bit) , 微信客户端浏览器(iphone6)

PC平台 :WIN10(64-bit)

代码实例

function runLottey(Elem) {// 1. 获取画布对象var context = Elem.getContext('2d')const WIDTH = Elem.width;const HEIGHT = Elem.height;// 2.绘制大转盘var as = new Image();as.src = "img/as.png";as.onload = function () {context.drawImage(as, 0, 0);};// 3.绘制指针var pin = new Image();pin.src = "img/pin.png";var pinwidth = 358;var pinheight = 301;pin.onload= function () {context.drawImage(pin, (WIDTH / 2 - pinwidth / 2 +10) , (HEIGHT / 2 - pinheight / 2 -10));};
}

实例效果图:

问题:

1.为什么指针会消失?

2.指针是否被绘制?

3.如何处理指针显示不正常问题?

观点整理:

HTML5在使用drawImage绘图的时候，出现刷新就不显示的问题，原来要想是图片正常显示需要为图片添加一个onload事件.

setTimeout 计时器上绑定的函数不会立即执行（不被立即执行的原因是JavaScript是单线程的）。实际上，被延迟的函数将依次排在执行队列的最后，等待下一次恰当的时间再执行。

若先给设置src属性，第一次浏览器执行完赋值src的语句后就要去加载图片，这个过程是很慢的，而此时程序已经执行完赋值语句，就不会等待是否加载完再执行下一条语句而是直接继续执行，然后开始给onload赋值函数，而赋值这个事件相对于从网上加载图片的时间是很短的，所以就可以执行onload函数了。假设有缓存，当执行完src的赋值语句后浏览器瞬间加载完图片，这个速度快到程序还没有执行到onload的赋值语句，所以此时onload事件被触发但此时还没有给onload事件赋值赋值，所以执行onload函数时为空函数，什么都不执行。

做过图片翻转效果的朋友其实都知道，要让图片轮换的时候不出现等待，最好是先让图片下载到本地，让浏览器缓存起来。这时，一般都会用到js里边的Image对象。一般的手段无非这样：

function preLoadImg(url) {var img = new Image();img.src = url;
}

通过onload就能获取到图片的宽高了。但onload大一点的图通常都比较慢，不实用，但只要图片被浏览器缓存，那么图片加载几乎就不用等待即可触发onload，我们要的是占位符。所以有些人通过缓存获取也可以这么写。

//通过complete与onload一起混合使用为了测试缓存效果，注意以下测试图片的url都不加时间戳// 图片地址
var img_url = 'http://www.qttc.net/static/upload/2013/13643608813441.jpg';// 创建对象
var img = new Image();// 改变图片的src
img.src = img_url;// 判断是否有缓存
if(img.complete){// 打印alert('from:complete : width:'+img.width+',height:'+img.height);
}else{// 加载完成执行img.onload = function(){// 打印alert('from:onload : width:'+img.width+',height:'+img.height);};
}

第一次执行，永远是onload触发

你再刷新，几乎都是缓存触发了

本菜鸟观点:

onload加载过快导致无法绘制指针.

通过多次实验测试,以及各位前人的观点分析,比较认同onload过快执行导致图片在已经赋值但没有加载完的情况下已经开始渲染了这样的观点.

在canvas中绘制图片不管url前置还是后置在当前版本谷歌浏览器中都是无法加载完图片进行绘制.

但是如果我刷新页面进行等待3s,却能不时看到指针绘制成功

这时候有两种可能图片加载慢或 onload过快所以我想到了用 setTimeout 延迟绘制时间,进行异步绘制. 结果是成功的.

在这个图表中有许多信息需要理解，如果完全理解了它们，你会对JavaScript引擎如何实现异步事件有一个很好的认识。这是一个一维的图标：垂直方向表示时间，蓝色的区块表示JavaScript代码执行块。例如第一个JavaScript代码执行块需要大约18ms，鼠标点击所触发的代码执行块需要11ms，等等。由于JavaScript引擎同一时间只执行一条代码（这是由于JavaScript单线程的性质），所以每一个JavaScript代码执行块会“阻塞”其它异步事件的执行。这就意味着当一个异步事件发生（例如，鼠标点击，计时器被触发，或者Ajax异步请求）后，这些事件的回调函数将排在执行队列的最后等待执行（实际上，排队的方式根据浏览器的不同而不同，所以这里只是一个简化）；

解决方法:

function runLottey(Elem) {// 1. 获取画布对象var context = Elem.getContext('2d')const WIDTH = Elem.width;const HEIGHT = Elem.height;var as = new Image();as.src = "img/as.png";as.onload = function () {context.drawImage(as, 0, 0);};var pin = new Image();pin.src = "img/pin.png";var pinwidth = 358;var pinheight = 301;pin.onload= function () {//此处增加一个异步setTimeoutsetTimeout(function () {context.drawImage(pin, (WIDTH / 2 - pinwidth / 2 +10) , (HEIGHT / 2 - pinheight / 2 -10));},0);};
}

总结: setTimeout异步方法可以让图片绘制放在队列后面以致于不会出现空绘. 但真的是这样吗?

期待大神们指导 ——

关于图片onload事件兼容性处理, 谷歌浏览器版本 56.0.2896.3 (64-bit) 微信客户端浏览器 canvas篇相关推荐

苹果微信更新不了最新版本_苹果iOS用户更新微信至版本7.0.13，可以进行微信号修改支持一年修改一次...
今日,微信官方表示,苹果iOS用户更新微信至版本7.0.13,可以进行微信号修改支持一年修改一次,入口位于"我"-"个人信息"-"微信号", ...
chromedriver驱动谷歌浏览器版本89.0.4389.82
链接: https://pan.baidu.com/s/1G1ue8et7SvmWQV_BQLeo5Q 提取码: hv7s
谷歌浏览器版本 94.0.4606.81（正式版本）
链接:https://pan.baidu.com/s/14nbHn2_zWgp7LlnpPvUO0g 提取码:1234
Java连接redshift数据库_配置 JDBC 驱动程序版本 1.0 连接 - Amazon Redshift
本文属于机器翻译版本.若本译文内容与英语原文存在差异,则一律以英文原文为准. 配置 JDBC 驱动程序版本 1.0 连接您可以使用 JDBC 驱动程序版本 1.0 连接从许多第三方 SQL 客户端工 ...
html 图片事件失效,javascript – 图像,onload事件在chrome中不起作用
我正在使用 html5来创建拖放图像上传功能.这在firefox中非常适合我,但在chrome中,图像onload事件仅在第一次触发时触发.如果我只在第一个作品中拖动多个图像,如果我在其中拖动一个图像 ...
iframe的onload事件
很多时候,我们会需要改变一个iframe的地址(src属性),或者使用表单(form)的target在指定的iframe进行提交后,在 iframe加载完毕(onload)时立即响应某个操作,以提高W ...
html onload状态事件,HTML onload事件用法及代码示例
当对象被加载时,HTML中的DOM onload事件发生. onload事件主要在元素中使用 onload事件可用于检查浏览器类型和浏览器版本,并根据该信息加载网页的版本. onload事件也可以用 ...
onload事件-----addLoadEvent函数
在给网页加一些特效时经常要在<body>中加入"onload"事件,即在网页加载完后执行某事件,例如:<body οnlοad="alert('欢迎光临 ...
jQuery的$(document).ready()和JavaScript onload事件
对元素的操作和事件的绑定需要等待一个合适的时机,可以看下面的例子: <!DOCTYPE html> <metacharset="utf-8"> <ht ...

关于图片onload事件兼容性处理, 谷歌浏览器版本 56.0.2896.3 (64-bit) 微信客户端浏览器 canvas篇

关于图片onload事件兼容性处理

一个小demo,关于canvas 绘制大转盘和指针,当同时各自添加onload事件指针图片突发性不显示.

兼容性问题-浏览器版本: 谷歌浏览器版本 56.0.2896.3 (64-bit) , 微信客户端浏览器(iphone6)

PC平台 :WIN10(64-bit)

问题:

1.为什么指针会消失?

2.指针是否被绘制?

3.如何处理指针显示不正常问题?

本菜鸟观点:

onload加载过快导致无法绘制指针.

解决方法:

总结: setTimeout异步方法可以让图片绘制放在队列后面以致于不会出现空绘. 但真的是这样吗?

关于图片onload事件兼容性处理, 谷歌浏览器版本 56.0.2896.3 (64-bit) 微信客户端浏览器 canvas篇相关推荐

最新文章

热门文章

关于图片onload事件兼容性处理, 谷歌浏览器版本 56.0.2896.3 (64-bit) 微信客户端浏览器 canvas篇

关于图片onload事件兼容性处理

一个小demo,关于canvas 绘制 大转盘 和 指针,当同时各自添加onload事件指针图片突发性不显示.

兼容性问题-浏览器版本: 谷歌浏览器版本 56.0.2896.3 (64-bit) , 微信客户端浏览器(iphone6)

PC平台 :WIN10(64-bit)

问题:

1.为什么指针会消失?

2.指针是否被绘制?

3.如何处理指针显示不正常问题?

本菜鸟观点:

onload加载过快导致无法绘制指针.

解决方法:

总结: setTimeout异步方法可以让图片绘制放在队列后面以致于不会出现空绘. 但真的是这样吗?

关于图片onload事件兼容性处理, 谷歌浏览器版本 56.0.2896.3 (64-bit) 微信客户端浏览器 canvas篇相关推荐

最新文章

热门文章

一个小demo,关于canvas 绘制大转盘和指针,当同时各自添加onload事件指针图片突发性不显示.