如何在沒有得到請求的情況下在li懸停上顯示特定的img？

我有4個盒子（<li>元素）和4個圖像。任務是在用戶懸停特定框時顯示特定圖像。如果用戶懸停在框0顯示圖像0，如果1個顯示圖像1.如何在沒有得到請求的情況下在li懸停上顯示特定的img？

懸停我更新狀態currantBox（例如currantBox：1）和把它傳遞給IMG SRC屬性像這樣：

<img src={this.props.content[this.props.currantBox]}/>

content是一個帶有img路徑的JSON數組。問題在於，每次懸停都會產生反應，即渲染即狀態更新.React使得請求下載圖像，這根本沒有效率。

實現我的想法或修復currant實現的最佳方式是什麼？

來源

2017-06-05 Arthur K.

get請求應該被瀏覽器緩存，除非你設置了一些不正確的緩存頭。如果您想在首次獲得時消除初始延遲，請使用圖像映射（所有圖像合爲一體）或預先加載圖像。 –

如果圖像不會被改變，我會建議一個完全的CSS解決方案。您可以使用4張圖像生成精靈並更改懸停時的background-position屬性。

來源

2017-06-05 13:04:01 Necvetanov

你可以預先加載圖片：

componentDidMount() { 
    let loaded = 0; 
    this.allLoaded = false; 
    this.props.content.forEach(src => { 
    var image = new Image(); 
    image.onLoad = function() { 
     console.log('image is now loaded'); 
     loaded = loaded + 1; 
     if (loaded === this.props.content.length) this.allLoaded = true; 
    }; 
    image.src = src; 
    } 
}

與上面的代碼，你現在可以顯示任何東西之前檢查this.allLoaded。請注意，這是一個簡單的實現，並依賴於永不改變的道具。如果道具預計會在裝載後發生變化，您可能需要編寫一些稍微複雜一些的代碼。但是這應該給你一個關於如何預加載你的圖像的想法。

來源

2017-06-05 13:05:19 Bill

如何在沒有得到請求的情況下在li懸停上顯示特定的img？

回答

相關問題