網站和Web應用程序加載通常會遭受內容反映：圖像在周圍內容後加載，從而導致佈局震動。這種令人沮喪的用戶體驗可以得到緩解。雖然React的懸念提供了解決方案，但它通過延遲所有內容直到圖像滿載來犧牲性能。更好的方法？立即顯示模糊的圖像預覽，加載後無縫地被高分辨率圖像替換。
漸進的jpegs似乎是答案，提供模糊的初始渲染，然後進行逐步完善。但是，即使是漸進式JPEG也需要等待初始數據，從而導致相同的初始內容回流。
本文探討了兩種替代方法：創建自定義模糊預覽並利用Blurhash。
使用的庫：
方法1：生成自定義預覽
我們可以將基本64編碼的低質量圖像預覽直接嵌入base64編碼的base64編碼，而不是依靠圖像URL。雖然編碼的base64通常會導致大型文件尺寸，但小型模糊預覽仍然易於管理。該預覽會立即顯示，一旦加載，就被高分辨率圖像所取代。
以下resizeImage函數（簡化為簡潔）使用JIMP創建模糊預覽：
函數resizeImage（src，maxWidth，質量）{
返回新的承諾（res => {
jimp.Read（src，async函數（err，image）{
if（image.bitmap.width> maxWidth）{
image.resize（maxWidth，jimp.auto）;
}
image.quality（質量）;
const PreviewImage = image.clone（）;
previewimage.quality（25）.blur（8）;
const Preview =等待PreviewImage.getBase64Async（previewimage.getMime（））;
res（{狀態：“成功”，image，preview}）;
}）;
}）;
}此預覽雖然不是很小，但比原始圖像要小得多。相應的反應代碼（簡化）句柄顯示預覽並使用完整分辨率圖像交換：
// ... React組件代碼...
方法2：使用Blurhash改進（和更好的替代方案）
雖然最初建議，但Blurhash在通過Base83編碼生成極小的預覽時，需要客戶端JavaScript和<canvas></canvas>標籤，使其不太理想服務器端渲染（SSR）框架，例如Next.js和Sveltekit。
優越的選擇是plaiceholder 。它利用尖銳的，需要類似的lambda安裝注意事項，如稍後所述，但生成了Tiny Base64預覽。通過跟踪圖像的尺寸並應用模糊過濾器，它可以實現與Blurhash相當的結果，同時完全適合SSR友好。預覽可以使用CSS在真實圖像下顯示，提供無縫過渡。
原始Blurhash實施（不推薦）：
尖銳的庫可以生成Blurhash預覽。對於AWS Lambda部署，請使用此安裝命令：
“ install-deps”：“ npm i && sharp_ignore_global_libvips = 1 npm i -ark = x64 - platform = linux sharp”
以下功能生成Blurhash預覽：
從“ Blurhash”中導入{encode，isblurhashvalid};
const sharp = require（“夏普”）;
導出異步函數getblurhashpreview（src）{
// ...（尖銳的處理和Blurhash編碼）...
}然後， PreviewCanvas組件使用帆布API解碼並呈現Blurhash預覽。
結論：
在圖像加載過程中防止內容回流可增強用戶體驗。生成自定義模糊預覽或使用plaiceholder在性能和視覺平滑度之間提供平衡，為簡單地延遲內容渲染的替代方案提供了一個較高的替代方案，直到加載了所有圖像。選擇最適合您項目需求和框架的方法。
以上是內聯圖像預覽具有鋒利，藍色和lambda功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
