我有一个函数能够通过 foreach(item) 迭代读取“图像链接”数组。在每次迭代中,我都试图:在 Image()
中加载图像对象,并在 onload 事件中获取属性( naturalWidth
和 naturalHeight
)并将其作为 <DIV>
的背景粘贴到 DOM 中.
但是img.onload
是异步的,在 onload 事件粘贴之前,所有迭代都将通过。
如何在每次迭代中创建连续的 img.onload 链和 img.src 的更改?
function singleGrid() {
galdiv1.className = galClassList;
function imgFill() {
arr.forEach(function(item) {
img = new Image();
img.onload = function() {
var nHeight = this.naturalHeight;
var nWidth = this.naturalWidth;
var res = nWidth / nHeight;
console.log("image source: " + arr[i] + ", naturalWidth: " + nWidth + "px, naturalHeight: " + nHeight + "px");
blockres = width * res;
var div = divCreate(blockres);
galdiv1.append(div);
};
img.src = item;##
Heading##
}, this);
}
imgFill();
}
最佳答案
var imageURLS = [];
var imageTags = [];
// Runs once when all images are loaded
function onAllImagesLoaded() {
}
// Individual image loaded Successfully
function onImageLoad() {
this.hasLoaded = true;
for (var i = 0; i < imageTags.length; ++i) {
if (!imageTags[i].hasLoaded) {
return; // Exit the function if any image hasn't loaded yet
}
}
onAllImagesLoaded();
}
// Individual image failed to load
function onImageError() {
console.warn("Error: image " + this.id + " could not be retrieved");
this.hasLoaded = true;
for (var i = 0; i < imageTags.length; ++i) {
if (!imageTags[i].hasLoaded) {
return;
}
}
onAllImagesLoaded();
}
function loadImages() {
var newImageTag = null;
for (var i = 0; i < imageURLS.length; ++i) {
newImageTag = new Image();
newImageTag.id = i; // Give each Image a unique identifier (Helps to find ones that don't load properly if you have any problems)
newImageTag.hasLoaded = false; // Add new 'hasLoaded' flag
newImageTag.onload = onImageLoad; // Set event handlers, It's better to use an existing function instead of an inlined one
newImageTag.onerror = onImageError; // This is because an inlined function will create a closure when called
newImageTag.src = imageURLS[i]; // This starts the async loading
imageTags.push(newImageTag);
}
}
关于javascript - 使用 img.src 将 img.onload 链接到 Image() 对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47389600/