Код Javascript выполняется правильно при отладке, но не работает без запуска Dev Tools для браузера - PullRequest
Новая
       18

Код Javascript выполняется правильно при отладке, но не работает без запуска Dev Tools для браузера

0 голосов
/ 29 ноября 2018

Я пытаюсь создать простой загрузчик изображений / просмотрщик галерей для веб-страницы с помощью PhotoSwipe.Плагин для просмотра галереи работает без проблем и нуждается в массиве (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();
}

1 Ответ

0 голосов
/ 30 ноября 2018

Проблема заключалась в том, что данные изображения загружались асинхронно, и программа пыталась прочитать размеры изображения до его загрузки.Я использовал комментарий 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().

...