Предварительная загрузка изображений для галереи Photoswipe

Итак, у меня есть массив изображений, которые я хочу загрузить в галерею с помощью Photoswipe, но у меня возникают проблемы с предварительным определением ширины и высоты изображения. В частности, я думаю, что мне нужно предварительно загрузить изображения

Вот мой JS для рендеринга страницы, здесь я определяю слайды и перечисляю их как локальную переменную для страницы ejs:

    var sizeOf = require('image-size');
    var url = require('url');
    var http = require('http');

    var slideshow = [];

    for(var i = 0; i < listing.listing_images.length; i++) {
        var image = listing.listing_images[i];
        var width, height = 0;
        var imgUrl = image.url;
        var options = url.parse(imgUrl);

        http.get(options, function (response) {
            var chunks = [];
            response.on('data', function (chunk) {
                chunks.push(chunk);
            }).on('end', function() {
                var buffer = Buffer.concat(chunks);
                **height = sizeOf(buffer).height;
                width = sizeOf(buffer).width;**
            });
        });
        var item = {
            src: image.url,
            h: height,
            w: width
        };


        slideshow.push(item);
    }


    res.render('example.ejs', {
        listing: listing,
        slides: slideshow
    });

А вот скрипт на странице ejs:

<% var slides = locals.slides %>
<script>
$('document').ready(function() {
    var pswpElement = document.querySelectorAll('.pswp')[0];

    // build items array using slideshow variable 
    var items = <%- JSON.stringify(slides) %>;
    console.log(items);

    // grab image

    if (items.length > 0) {
        // define options (if needed)
        var options = {
            // optionName: 'option value'
            // for example:
            index: 0 // start at first slide
        };

        // Initializes and opens PhotoSwipe
        var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
        gallery.init();

    }

</script>

По сути, происходит то, что массив элементов фотосвайпа передается нормально, но ширина и высота не устанавливаются до тех пор, пока фотосвайп не инициализируется и не вызовет загрузку img. Таким образом, изображения не отображаются, потому что их высота и ширина еще не установлены.

Есть ли способ инициировать загрузку изображений в массиве слайд-шоу, чтобы ширина и высота устанавливались перед передачей в Photoswipe? Я также пытался посмотреть, могу ли я просто сначала установить их на 0, а затем попытаться обновить высоту и ширину позже и попытаться принудительно перезагрузить фотосвайп, но фотосвайп не распознает новую высоту / ширину изображения.

Извините, если что-то из этого неясно / запутано ерундой ejs, не стесняйтесь спрашивать что-либо, и я хотел бы уточнить.

Спасибо


ejs photoswipe
person Linnea Watson    schedule 23.04.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

В итоге решил это, используя API:

gallery.listen('gettingData', function(index, item) {
        // index - index of a slide that was loaded
        // item - slide object
        var img = new Image();
        img.src = item.src;
        item.h = img.height;
        item.w = img.width;
    });

    gallery.invalidateCurrItems();
// updates the content of slides
    gallery.updateSize(true);

Если кто-то читает это, и есть лучший способ прочитать размер изображения, не создавая новый img, или оптимизировать это, я буду рад предложениям. :)

person Linnea Watson    schedule 25.04.2016