V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
aglsv
V2EX  ›  JavaScript

使用 onload 给改边图片宽高无效

  •  
  •   aglsv · 2021-09-01 11:53:59 +08:00 · 2056 次点击
    这是一个创建于 1158 天前的主题,其中的信息可能已经有所发展或是发生改变。
    
    async function setLatexSize(arr_latexImg, fontSize) {
            for (let i = 0;i< arr_latexImg.length;i++){
                let newImg = new Image()
                newImg.src = arr_latexImg[i].src
                await new Promise((resolve) => {
                    newImg.onload = function() {
                        arr_latexImg[i].height = fontSize * newImg.height / 16
                        arr_latexImg[i].width = fontSize * newImg.width / 16
                        arr_latexImg[i].setAttribute('width', fontSize * newImg.width / 16);
                        arr_latexImg[i].setAttribute('height', fontSize * newImg.height / 16);
                        resolve()
                    }
                })
            }
        }
    
    

    我想跟踪字号的改变来设置图片的宽高,通过 for 循环遍历每一个 img 元素,之后通过 onload 里面来设置 img 元素的宽高,但是现在的问题是当我 console 出arr_latexImg[i]的时候,他标签上面是有宽高属性的,但是我页面中的元素本身依旧是原来的样子,没有变化

    img

    img

    上面是页面中的元素标签,下面的图是我在 console 中显示的arr_latexImg[0]arr_latexImg[0]中的属性是设置上了,但是元素本身依旧没有, arr_latexImg这个数组是通过 jq 获取元素,完了 each 一个新的数组,r 这个数组就是给我传的arr_latexImg,下面是压缩后的代码。我想知道目前的问题是在哪块,是我方法哪块写的有问题吗

    t = $("div.table").children().find("img.hex-exe-img"),
                            r = [];
                            $.each(t, function(e, n) {
                                r.push(t[e])
                            }),
    
    
    
    第 1 条附言  ·  2021-09-01 15:06:11 +08:00
    现在是当第一次进入我这方法的时候传过来的数组中的 img 都还是正常的,也会指向页面的标签,但是当我第一次执行 await 之后,数组里的 img 标签就会变得很奇怪
    https://img-mid.csdnimg.cn/release/static/image/mid/ask/882542974036194.png?x-oss-process=image/auto-orient,1
    这个是我刚进入方法的时候,arr_latexImg[0]打印出来的,
    https://img-mid.csdnimg.cn/release/static/image/mid/ask/144962974036120.png?x-oss-process=image/auto-orient,1
    这个是我执行了一次 await 之后,在打印就变成了这样,他成了 img 标签里还有个 img 标签,这个是怎么回事啊
    23 条回复    2021-09-02 14:54:33 +08:00
    kkocdko
        1
    kkocdko  
       2021-09-01 12:18:29 +08:00
    你试试 window.foo = e,然后 F12 里头选中元素,$0 === window.foo ?
    aglsv
        2
    aglsv  
    OP
       2021-09-01 12:49:38 +08:00
    @kkocdko 是在我写的方法里加上 window.foo = e 吗
    aglsv
        3
    aglsv  
    OP
       2021-09-01 12:53:16 +08:00
    @kkocdko 加在 for 循环里还是 onload 里面呢
    misdake
        4
    misdake  
       2021-09-01 12:53:18 +08:00
    style 改了么
    Vegetable
        5
    Vegetable  
       2021-09-01 13:03:59 +08:00
    既然已经修改了 dom 了,没有效果就不是代码的问题了。
    一般来说我会通过 css 控制图片大小,而不是 img 标签的属性。
    你可以试一下,因为即使设置了 img 的属性,他依然可能会被 css 覆盖,所以第一步是先检查 hex-exe-img 这个 class 里有没有声明尺寸
    aglsv
        6
    aglsv  
    OP
       2021-09-01 13:35:27 +08:00
    @Vegetable 我看 css 里面没有设置过这类图片的宽高
    aglsv
        7
    aglsv  
    OP
       2021-09-01 13:35:51 +08:00
    @misdake css 里面一开始没有设置宽高
    renmu123
        8
    renmu123  
       2021-09-01 14:14:10 +08:00 via Android
    你要不动态设置 imgg 父级的 font-size,然后 img 的宽高用 em 单位
    aglsv
        9
    aglsv  
    OP
       2021-09-01 14:57:40 +08:00
    @renmu123 不能这么设置,我需要获取
    joesonw
        10
    joesonw  
       2021-09-01 15:07:56 +08:00
    用 newImg.height = xxx, i 没有被 closure 拿到, i 变成 arr_latexImg.length 了.
    joesonw
        11
    joesonw  
       2021-09-01 15:09:43 +08:00
    @joesonw 看错了, const j = i 一下;
    aglsv
        12
    aglsv  
    OP
       2021-09-01 15:25:42 +08:00
    @joesonw 但是我执行到 onload 里面的时候 console 了一下 i,他是 0,1,2 正确显示的,我这个方法哪块会产生闭包啊
    coolan
        13
    coolan  
       2021-09-01 15:54:32 +08:00
    我在你这帖子里试了试:t = $("div.markdown_body").children().find("img") 别的没变,执行 setLatexSize(r,15);是可以改变图片的。
    aglsv
        14
    aglsv  
    OP
       2021-09-01 16:04:17 +08:00
    @coolan setLatexSize 这个方法原封不动吗?
    autoxbc
        15
    autoxbc  
       2021-09-01 16:04:37 +08:00
    出现图片标签里套图片标签,应该是替换语句写成了插入语句,可以检查一下上下文

    改元素属性并不需要一个新元素的去替代,自然也不需要去等待 onload,整个过程都是同步操作,也不需要异步函数
    coolan
        16
    coolan  
       2021-09-01 16:06:53 +08:00
    @aglsv 对,你直接在这个页面里 F12 试一下就行。
    aglsv
        17
    aglsv  
    OP
       2021-09-01 16:08:23 +08:00 via Android
    @autoxbc 主要是我这个设置新的宽高需要原宽高来计算,属于按比例放大,所以需要 onload,我这个方法里面目前就只是遍历数组获取 img 元素之后设置宽高,也没有些什么插入之类的
    autoxbc
        18
    autoxbc  
       2021-09-01 16:17:17 +08:00
    @aglsv #17 你的代码不是从新元素上读这个属性再计算么,那为什么不直接读原来的元素呢
    Summerdx404
        19
    Summerdx404  
       2021-09-01 16:27:44 +08:00
    img 标签的 width 和 height 属性通常是用来加载时预留位置的

    需要改变加载完成后的显示大小,建议把 img 放在一个容器里, 通过改容器的高宽+css 的方法应该可行

    参考:
    https://www.w3school.com.cn/tags/att_img_height-width.asp
    https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img
    aglsv
        20
    aglsv  
    OP
       2021-09-01 17:19:00 +08:00
    @Summerdx404 我这块直接通过```arr_latexImg[i].height```来设置图片的宽度,这种应该是直接改宽高的吧。
    @autoxbc 我要获取的是图片的原始高度,如果我的图片高度已经改变过了的话这时候再执行读取的就是改变后的,所以我用的是新建的。
    aglsv
        21
    aglsv  
    OP
       2021-09-01 17:28:30 +08:00
    @Summerdx404 看了一下 img.height 设置的就是 img 的 height 属性,是我知识浅薄了
    autoxbc
        22
    autoxbc  
       2021-09-01 20:12:52 +08:00
    @aglsv #20 在第一次设置时把原始值保存起来,以后就可以直接读取了。这个保存位置可以是元素上的自定义属性,也可以是一个全局有效的 Map
    aglsv
        23
    aglsv  
    OP
       2021-09-02 14:54:33 +08:00
    @autoxbc ok,多谢了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2534 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 04:25 · PVG 12:25 · LAX 21:25 · JFK 00:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.