Question

所以我想要使用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>

基本上发生的事情是照片擦除项目的数组正在传递中，但是在photoswipe初始化并触发img加载之前，不会设置宽度和高度。所以图像没有显示，因为它们的高度和宽度尚未设置。

有没有办法触发幻灯片阵列中图像的加载，以便宽度和宽度相同。在传递给Photoswipe之前设置高度？我也试过看看我是否可以将它们最初设置为0，然后尝试更新高度和宽度，然后尝试强制photoswipe重新加载，但是photoswipe无法识别图像的新高度/宽度。

很抱歉，如果其中任何一个不清楚/混淆了ejs废话，请随时提出任何问题，我很乐意澄清。

由于

Answer 1

结束利用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，或者优化这一点，我会喜欢这些建议。：）

为Picturewipe Gallery预加载图像

1 个答案: