12

さまざまなサイズの画像のリストがあります。

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 に依存するため、react では機能しません。

私の 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 で画像をレンダリングする必要がありますか?

4

1 に答える 1

14

画像は JavaScript の実行中に非同期でダウンロードされるため、画像の高さを記録するには画像が読み込まれるまで待つ必要があります。彼らのイベントを待って、onload次のようなことをすることができます

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

それだけで始められます。準備ができたときにレンダリングする方法を理解する必要があります。

于 2016-07-11T18:02:35.180 に答える