鍍金池/ 問(wèn)答/數(shù)據(jù)庫(kù)  HTML/ 多張圖片onload需要一個(gè)個(gè)生成new Image() ?

多張圖片onload需要一個(gè)個(gè)生成new Image() ?

問(wèn)題描述

v-html 時(shí)對(duì)html內(nèi)容里的img寬度做限制，圖片的onload需要一個(gè)個(gè)生成new Image() 嗎

原先的寫(xiě)法只能改變第一張

mounted: function () {
    this.$nextTick(function () {
        var Img = new Image();
        var imgs = $("#infoContent p img");
        imgs.each(function (i, v) {
            Img.src = v.src;
            Img.onload = function() {
                if ($(v).width() > 630) {
                    $(v).css('width', '100%');
                }                                    
            }
        })
    })
}

更改后的

mounted: function () {
    this.$nextTick(function () {
        var imgs = $("#infoContent p img"), Img = [];
        imgs.each(function (i, v) {
            Img[i] = new Image();
            Img[i].src = v.src;
            Img[i].onload = function() {
                if ($(v).width() > 630) {
                    $(v).css('width', '100%');
                }
            }
        })
    })
}

需要對(duì)每個(gè)img都new一下 有沒(méi)有更好的寫(xiě)法

回答
編輯回答
故林

原本是建議用ref操作的，不過(guò)看到你是用v-html這個(gè)方案就不可行了，不知道你的html是后端提供的還是自己拼接的，如果可以在img上面直接加一個(gè)方法就能很簡(jiǎn)單的實(shí)現(xiàn)你的需求了。

data() {
  return {
    html: '<img src="xxx" onload="onImgLoad(this)">',
  }
},

在vm外面定義一個(gè)全局函數(shù)來(lái)處理

window.onImgLoad = (el) => {
  if (el.width > 630) {
    el.style.width = '100%'
  }
}
2017年2月11日 20:35
編輯回答
逗婦乳

應(yīng)該能用css做到 試過(guò)max-width嗎
還有你這jq混寫(xiě)

2018年9月9日 12:41