Javascript 代码在调试时正确执行，但在没有浏览器开发工具运行的情况下无法工作

Question

我正在尝试使用PhotoSwipe为网页构建一个简单的图像上传器/图库查看器。gallery查看器插件可以正常工作，并且需要一个数组(下面代码中的items(，其中包含图像src以及每个图像的宽度和高度。函数readImageDimensions()获取数据，然后将其保存到items。

当我调试代码时，它会完美地运行，库会获得数据，但如果我跳过调试器，item变量会索引两个对象，但src, w, h都有空值。当代码没有在调试过程中运行时，代码中是否有异步运行或以其他方式中断流的内容？

上传和呈现图像的代码：

var thumbsDiv = "";
var items = [];
document.addEventListener("DOMContentLoaded", init, false);
function init() {
document.querySelector('.file-uploader').addEventListener('change', onFilesSelected, false);
thumbsDiv = document.querySelector(".thumbs-div");
}
function onFilesSelected(e) {
if (!e.target.files || !window.FileReader) return;
thumbsDiv.innerHTML = "";
var width = 0;
var height = 0;
items = [];
function readImageDimensions(data) {
var image = new Image();
image.src = data;
width = image.width;
height = image.height;
}
var files = e.target.files;
var filesArr = Array.prototype.slice.call(files);
filesArr.forEach(function (f) {
if (!f.type.match("image.*")) {
return;
}
var reader = new FileReader();
reader.onloadend = function (e) {
var result = e.target.result;
var html = '<div class="img-wrap"><span class="close">&times;</span><img src="' + result + '"/>' + f.name + '</div>';
thumbsDiv.innerHTML += html;
readImageDimensions(result);
items.push({
src: result,
w: width,
h: height
});
}
reader.readAsDataURL(f);
});
}

用于实例化库的代码：

var openGallery = function () {
var pswpElement = document.querySelectorAll(".pswp")[0];
var options = {
index: 0
};
var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
}

Answer 1

问题实际上是异步加载图像数据，并且程序试图在加载之前读取图像维度。我使用HMR的评论来进一步研究onload()处理程序，并将readImageDimensions()修改为：

function readImageDimensions(data) {
var image = new Image();
console.log(data);
image.onload = function () {
width = image.width;
height = image.height;
items.push({
src: data,
w: width,
h: height
});
}
image.src = data;
}

通过这种方式，onload()可以读取宽度和高度，并且在整个图像数据加载到浏览器缓存之前不会这样做。代码还将数据推送到items[]数组中，显然我会将该方法重命名为更好的方法，如setImageDataForGallery()。