Question

我正在尝试使用PhotoSwipe为网页构建一个简单的图像上传器/图库查看器。 Gallery Viewer插件可以正常工作，并且需要一个数组（以下代码中的{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()。

调试时Java脚本代码可以正确执行，但是如果没有运行浏览器开发工具就无法正常工作

1 个答案: