07月18, 2018

分享一些小细节

img.src

问题: img.src 属性赋值后,获取图片宽高有误

demo

function myFunction() {
    var img = new Image();
    img.src = "https://static.imwineki.cn/static/upload/20170130/logo.jpg";
    var x = img.naturalWidth;
    console.log(x)
}
myFunction()  //0
myFunction() //1239

问题描述

首次执行 myFunction() 可以看到输出 0 , 第二次输出的时候就可以获取到 图片的原始尺寸了。

原因

  • 当给 img.src 赋值是,其实是发送了一次对图片的http 请求(发送请求是一个异步过程),那么当请求还没有完成时,我们同步执行 console.log 操作就无法获取到图片原始尺寸,而输出了默认值 0。
  • 当图片请求完成时,这时你输出 img.width 你会发现值与 img.naturalWidth 完全相同,这时因为,当我们没有单独在css 或 dom 节点中设置 img 的width 、height 值时,width 就会把 naturalWidth(原始尺寸)作为默认值。

浏览器对于URL中hash处理方式分析

PlanA :

访问链接: http://localhost:8001/test/index

server端redirect路径conf(from 表示请求路由, to 表示 302 中response 的location 路径):

{ from: '/test/index', to: '/ee/index#/apply/index/paxjcx'},

{ from: '/ee/index', to: '/product.html'},

结果:

浏览器 URL最终落地页
Chrome /product.html#/apply/index/paxjcx
FireFox /product.html#/apply/index/paxjcx
IE /product.html#/apply/index/paxjcx
Safari /product.html

PlanB: 访问链接: http://localhost:8001/test/index#hash=111

server端redirect路径conf(from 表示请求路由, to 表示 302 中response 的location 路径):

{ from: '/test/index', to: '/ee/index#/apply/index/paxjcx'},
{ from: '/ee/index', to: '/product.html'},

结果:

浏览器 URL最终落地页
Chrome /product.html#/apply/index/paxjcx
FireFox /product.html#/apply/index/paxjcx
IE /product.html#/apply/index/paxjcx
Safari /product.html#hash=111

PlanC:

访问链接: http://localhost:8001/test/index

server端redirect路径conf(from 表示请求路由, to 表示 302 中response 的location 路径):

{ from: '/test/index', to: '/ee/index#/apply/index/paxjcx'}

结果:

浏览器 URL最终落地页
Chrome /ee/index#/apply/index/paxjcx
FireFox /ee/index#/apply/index/paxjcx
IE /ee/index#/apply/index/paxjcx
Safari /ee/index

PlanD:

访问链接: http://localhost:8001/test/index#hash=111

server端redirect路径conf(from 表示请求路由, to 表示 302 中response 的location 路径):

{ from: '/test/index', to: '/ee/index#/apply/index/paxjcx'}

结果:

浏览器 URL最终落地页
Chrome /ee/index#/apply/index/paxjcx
FireFox /ee/index#/apply/index/paxjcx
IE /ee/index#/apply/index/paxjcx
Safari /ee/index#hash=111

结论:

Safari浏览器只能传递和识别client端输入的hash值,不可以识别和传递 由 server端回传的 hash 值。

本文链接:https://www.imwineki.cn/post/detail.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。