javascript - img.height 问题（每次返回 0）
问题描述
我有以下html代码：
<body>
<div class="img-section">
</div>
</body>
和 javascript
const init = function () {
var pic = document.createElement("img");
pic.src = "soflogo.png";
var src = document.getElementsByClassName("img-section")[0];
src.appendChild(pic);
let image = document.querySelector("img");
image.addEventListener("load", function() {
height = pic.height;
console.log(height);//this usually returns right value
})
console.log(pic.height);//this always returns 0
console.log(height);//this returns error (not defined for sure)
}
document.addEventListener("DOMContentLoaded", init);
我需要处理图像的高度。在 javascript 代码中，我想在页面上添加图像，然后我想对 img.height 做一些事情。我尝试使用加载事件，通常效果很好（每 10 次刷新 console.log(height); 返回奇怪的值，比如 0 或完全没有）。所以我需要修复那个 console.log(pic.height); 总是返回 0（就在加载事件的下方）。谢谢（对不起我的英语不好）
编辑：谢谢你的回答。但是还有另一个问题。上面的代码只是我的项目的一个例子。主要任务是将图像放入三个 div 标签中。我希望，高度问题修复会修复它，但它没有。所以，这是我的主要项目：
const init = function () {
let allGalleryData = [{
galleryName: "Terénní seminář 2015",
galleryThumbnailUrl: "gallery/Fotoseminar2015/",
galleryFullSizeUrl: "gallery/Fotoseminar2015/big",
galleryImages: [
{ url: '01.jpg', title: 'something', stars: 2.5, people: 91 },
{ url: '02.jpg', title: 'something', stars: 2.9, people: 42 },
{ url: '03.jpg', title: 'something', stars: 5, people: 19 },
{ url: '04.jpg', title: 'something', stars: 1.6, people: 31 },
{ url: '05.jpg', title: 'something', stars: 3.2, people: 20 },
{ url: '06.jpg', title: 'something', stars: 4.1, people: 43 },
{ url: '07.jpg', title: 'something', stars: 2.2, people: 21 },
{ url: '08.jpg', title: 'something', stars: 3.1, people: 82 },
{ url: '09.jpg', title: 'something', stars: 3.7, people: 18 },
{ url: '10.jpg', title: 'something', stars: 2.1, people: 58 },
{ url: '11.jpg', title: 'something', stars: 4.8, people: 98 },
{ url: '12.jpg', title: 'something', stars: 1.8, people: 25 },
{ url: '13.jpg', title: 'something', stars: 2.5, people: 41 },
{ url: '14.jpg', title: 'something', stars: 4.4, people: 33 },
{ url: '15.jpg', title: 'something', stars: 4.1, people: 28 },
{ url: '16.jpg', title: 'something', stars: 2.1, people: 53 },
{ url: '17.jpg', title: 'something', stars: 2.7, people: 24 },
{ url: '18.jpg', title: 'something', stars: 1.1, people: 72 },
{ url: '19.jpg', title: 'something', stars: 3.5, people: 96 },
{ url: '20.jpg', title: 'something', stars: 2.4, people: 3 },
{ url: '21.jpg', title: 'something', stars: 4.6, people: 32 },
{ url: '22.jpg', title: 'something', stars: 3.1, people: 45 },
{ url: '23.jpg', title: 'something', stars: 3.2, people: 23 },
{ url: '24.jpg', title: 'something', stars: 4.8, people: 19 },
{ url: '25.jpg', title: 'something', stars: 3.8, people: 13 },
{ url: '26.jpg', title: 'something', stars: 4.7, people: 71 },
{ url: '27.jpg', title: 'something', stars: 2.3, people: 96 },
{ url: '28.jpg', title: 'something', stars: 1.5, people: 84 },
{ url: '29.jpg', title: 'something', stars: 1.3, people: 13 }
]
},
{
galleryName: "Skotsko 2014",
galleryThumbnailUrlS: "gallery/Skotsko/",
galleryFullSizeUrl: "gallery/Skotsko/big",
galleryImagesNameUrl: [
{ url: 'Sk2014_01.JPG', title: 'Kanál v Amsterodamu', stars: 1.1, people: 24 },
{ url: 'Sk2014_02.JPG', title: 'Amsterodam (pobřeží)', stars: 3.4, people: 36 },
{ url: 'Sk2014_03.JPG', title: 'Trajekt do UK', stars: 1.3, people: 16 },
{ url: 'Sk2014_04.JPG', title: 'Pobřeží Skotska', stars: 3, people: 35 },
{ url: 'Sk2014_05.JPG', title: 'Urquhart Castle', stars: 2.3, people: 38 },
{ url: 'Sk2014_06.JPG', title: 'Břeh jezera', stars: 2.4, people: 50 },
{ url: 'Sk2014_07.JPG', title: 'Eilean Donan Castle', stars: 3.1, people: 31 },
{ url: 'Sk2014_08.JPG', title: 'Skotský skot', stars: 3.1, people: 40 },
{ url: 'Sk2014_09.JPG', title: 'The Old Man of Storr, Skye', stars: 2.9, people: 68 },
{ url: 'Sk2014_10.JPG', title: 'The Old Man of Storr, Skye', stars: 5, people: 71 },
{ url: 'Sk2014_11.JPG', title: 'Culloden', stars: 3.6, people: 45 },
{ url: 'Sk2014_12.JPG', title: 'Cawdor Castle', stars: 3.7, people: 31 },
{ url: 'Sk2014_13.JPG', title: 'Cairn Gorm', stars: 4.8, people: 77 },
{ url: 'Sk2014_14.JPG', title: 'Cairngorms National Park', stars: 4.8, people: 64 },
{ url: 'Sk2014_15.JPG', title: 'Tower Bridge', stars: 2.9, people: 61 },
{ url: 'Sk2014_16.JPG', title: 'Butler\'s Wharf', stars: 3.7, people: 78 },
{ url: 'Sk2014_17.JPG', title: 'London Eye', stars: 1.4, people: 85 },
{ url: 'Sk2014_18.JPG', title: 'Covent garden market - London', stars: 1.4, people: 76 },
{ url: 'Sk2014_19.JPG', title: 'Buckinghamský palác', stars: 2.4, people: 24 },
{ url: 'Sk2014_20.JPG', title: 'Big Ben London', stars: 4.2, people: 91 },
{ url: 'Sk2014_21.JPG', title: 'Big Ben London', stars: 3.5, people: 39 },
{ url: 'Sk2014_22.JPG', title: 'Big Ben London', stars: 3.7, people: 83 }
]
}
]
let column1Lenth = 0;
let column2Lenth = 0;
let column3Lenth = 0;
let height;
let source;
let path;
let image;
for (const i of allGalleryData) {
let seminar = i.galleryThumbnailUrl;
let skotsko = i.galleryThumbnailUrlS;
if (i.galleryImages) {
for (const img of i.galleryImages) {
path = seminar + img.url;
let pic = document.createElement("img");
pic.src = path;
image = document.querySelector("img");
image.addEventListener("load", function () {
height = pic.height;
if ((column1Lenth <= column2Lenth) && (column1Lenth <= column3Lenth)) {
column1Lenth += height;
source = document.getElementsByClassName("column1")[0];
source.appendChild(pic);
}
else if (((column2Lenth < column1Lenth) && (column2Lenth <= column3Lenth))) {
column2Lenth += height;
source = document.getElementsByClassName("column2")[0];
source.appendChild(pic);
}
else if ((column3Lenth < column1Lenth) && (column3Lenth < column2Lenth)) {
column3Lenth += height;
source = document.getElementsByClassName("column3")[0];
source.appendChild(pic);
}
})
}
}
else {
for (const img of i.galleryImagesNameUrl) {
path = skotsko + img.url;
let pic = document.createElement("img");
pic.src = path;
image = document.querySelector("img");
image.addEventListener("load", function () {
height = pic.height;
if ((column1Lenth <= column2Lenth) && (column1Lenth <= column3Lenth)) {
column1Lenth += height;
source = document.getElementsByClassName("column1")[0];
source.appendChild(pic);
}
else if (((column2Lenth < column1Lenth) && (column2Lenth <= column3Lenth))) {
column2Lenth += height;
source = document.getElementsByClassName("column2")[0];
source.appendChild(pic);
}
else if ((column3Lenth < column1Lenth) && (column3Lenth < column2Lenth)) {
column3Lenth += height;
source = document.getElementsByClassName("column3")[0];
source.appendChild(pic);
}
})
}
}
}
}
document.addEventListener("DOMContentLoaded", init);
而且，如果我刷新站点，很有可能高度仍然为 0。即使我使用加载事件。实际上，我在下面的 javascript 代码中指的是这个问题 ( //this USSUALLY returns right value)。那么有人知道如何解决这个问题吗？（我是javascript的新手，大概三个月，所以我对promise和async不太了解）
解决方案
您可以尝试更改您的inittoasync并创建一个函数，该函数在加载事件完成后基本上返回一个承诺，并且await该承诺完成如下：
const loadPromise = url => new Promise((resolve, reject) => {
const img = new Image();
img.addEventListener('load', () => resolve(img));
img.src = url;
})
const init = async function () {
var pic = document.createElement("img");
pic.src = "https://www.w3schools.com/html/pic_trulli.jpg";
var src = document.getElementsByClassName("img-section")[0];
src.appendChild(pic);
const img = await loadPromise(pic.src);
//height = pic.height;
console.log(img.height);
}
document.addEventListener("DOMContentLoaded", init);<div class="img-section"></div>推荐阅读
- python - 如何在 keras 中正确投射布尔层？
- node.js - Systemd + NPM 启动
- mysql - 搜索包含另一个表列表中的字符串的行
- python - 如何找出/打印使用哪个版本的协议生成了 pickle 文件
- codeigniter - 无法加载请求的文件（不区分大小写）
- c++ - 如何使 Qt Signal 按值发出而不是编译错误而不是引用？
- devops - DevOps 持续交付 Java 脚本
- terraform - 如何在 Terraform 中使用 if else-if else 条件
- c# - 如何为 .dll 添加自己的资源本地化（例如 AvalonDock）
- php - 这种方法调用方式有什么区别