JS 图片上传兼容性问题(获取图片宽高兼容)

简介:

原代码(360安全浏览器的极速模式不兼容)

1
2
3
4
5
function ImgAuto(i, MaxW, MaxH) {
     var o =  new  Image();
     o.src = i.src;
     var w = o.width; //w等于null,别的浏览器未出现该问题

图片需要重新再加载一遍

1
2
3
4
5
6
7
function ImgAuto(i, MaxW, MaxH) {
     var o =  new  Image();
     o.onload = function(){        
         var w = o.width;
    
     o.src = i.src;

注:

    把onload写到前面去,先告诉浏览器如何处理这张图片,再指定这张图片的源,这样是为了避免IE兼容性问题。

    IE会缓存图片,第2次加载的图片,不是从服务器上传过来的,而是从缓冲区里加载的,不是IE没有触发onload事件,而是因为加载缓冲区的速度太快,以至于没有运行到img.onload的时候,onload事件已经触发了。这让我想到了Ajax,在写xmlhttp的时候,都是先指定onstatechange的回调函数,然后再send数据的,道理是一样的。










本文转自 艺晨光 51CTO博客,原文链接:http://blog.51cto.com/ycgit/1707144,如需转载请自行联系原作者
目录
相关文章
|
5月前
|
前端开发 JavaScript Java
基于cropper.js的图片上传和裁剪
基于cropper.js的图片上传和裁剪
93 0
|
存储 JavaScript 安全
阿里 OSS图片上传 —— 原生JS中使用
这是最近开发遇到的一个坑,"可爱"的前辈们留下来的宝贵财产,很不幸的是,一行注释都没给,所以开心(被迫)的去研究了一下文档. 然而发现官方文档又臭又长,于是自己捣鼓了下,总算是搞出来了.
1023 0
阿里 OSS图片上传 —— 原生JS中使用
|
5天前
|
JavaScript 前端开发
JavaScript如何获得浏览器的宽高
JavaScript如何获得浏览器的宽高
|
7月前
|
JavaScript
js多图片上传--可删除demo效果示例(整理)
js多图片上传--可删除demo效果示例(整理)
|
XML 前端开发 JavaScript
JS案例:ajax获取图片列表
JS案例:ajax获取图片列表
177 0
JS案例:ajax获取图片列表
|
11月前
|
JavaScript 对象存储
vue2.6,js集成oss后图片上传成功后,下载图片打开显示图片损坏
我确认本地上传的图片没问题,我用的put直传,拿到返回的url,换了几张图都这样
vue2.6,js集成oss后图片上传成功后,下载图片打开显示图片损坏
|
JavaScript
(最方便兼容各种js)拿到路径全部信息(hash,host,hostname,href,origin,pathname,port,protocol)以及跳转路由
(最方便兼容各种js)拿到路径全部信息(hash,host,hostname,href,origin,pathname,port,protocol)以及跳转路由
130 0
(最方便兼容各种js)拿到路径全部信息(hash,host,hostname,href,origin,pathname,port,protocol)以及跳转路由
|
移动开发 JSON JavaScript
AngularJs异步上传图片,并获取图片地址(JS service层)
anjularjs对于post和get请求默认的Content-Type header 是application/json。通过设置‘Content-Type’: undefined,这样浏览器会把Content-Type 设置为 multipart/form-data.
94 0
AngularJs异步上传图片,并获取图片地址(JS service层)