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

Question

我正在尝试使用 PhotoSwipe 为网页构建一个简单的图像 uploader/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() 通过读取宽度和高度获得 "primed"，并且在整个图像数据加载到浏览器缓存之前不会这样做。该代码还将数据推送到 items[] 数组，显然我会将方法重命名为更好的名称，例如 setImageDataForGallery().

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

Javascript code executes correctly when debugging, but doesn't work without browser Dev Tools running

javascript

debugging

jquery

photoswipe

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

Javascript code executes correctly when debugging, but doesn't work without browser Dev Tools running

javascript

debugging

jquery

photoswipe

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