預加載Photoswipe Gallery圖片

因此，我想要使用Photoswipe將圖片加載到圖庫中，但是我在預定義圖片寬度和高度時遇到問題。具體而言，我想我需要預載的圖片預加載Photoswipe Gallery圖片

這裏是我的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項目正在通過罰款，但寬度和高度不設置，直到photoswipe初始化和觸發img加載。所以圖像不顯示，因爲它們的高度和寬度尚未設置。

有沒有辦法觸發載入幻燈片數組中的圖像，以便在傳遞到Photoswipe之前設置寬度爲&的高度？我也嘗試過看我是否可以將它們初始設置爲0，然後嘗試更新高度和寬度，並嘗試強制重新加載photoswipe，但photoswipe不會識別圖像的新高度/寬度。

對不起，如果有任何不清楚/與ejs廢話糊塗，隨時提出任何問題，我很樂意澄清。

感謝

來源

2016-04-23 Linnea Watson

端起來解決這個借力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讀取圖像大小，或優化這個我'愛的建議。 :)

來源

2016-04-25 20:45:47

預加載Photoswipe Gallery圖片

回答

相關問題