Question

我有一个不同大小的图像列表。

images = ['https://example.com/1.jpg','https://example.com/2.jpg', ... ]

我希望在渲染之前得到一个高度数组。然后，我将仅基于scrollHeight渲染应该在视口中的图像。例如使用React Infinte

我可以在反应组件

之外轻松完成

let imgHeights =  images.map(imgUrl => {
    var img  = new Image()
    img.src = imgUrl
    return img.height;
})

但是new image()在反应中不起作用，因为它依赖于DOM。

My React组件渲染方法如下所示。

var ImageList = (images) => {
     let buildImageList = images.map(imgUrl => {
         return <img src= {imgUrl}></img>
     })

     let imgHeights = images.map(imgUrl => {
         let img = new Image()
         img.src = imgUrl
         return img.height //this doesn't work 
     })

     return (
         <Infinte elemetHeight = {imgHeights} onInfiniteLoad ={buildImageList} />
     ) 
}

如何获得图像高度？我应该使用ReactDOM在临时div中渲染图像吗？

Answer 1

当javascript继续执行时，图像会异步下载，因此您需要等待它们加载才能记录它们的高度。您可以等待onload事件并执行类似

的操作

 let imgHeights = {};
 images.forEach(imgUrl => {
     let img = new Image();
     img.src = imgUrl;
     img.onload = () => imgHeights[imgUrl] = img.height;
 })

这只是让你开始;你仍然需要弄清楚如何在它们准备就绪时渲染它们。

在渲染之前查找反应组件或图像的大小

1 个答案: