在 Web 開發領域，網站上圖片載入的速度可能會影響或破壞使用者體驗。圖片載入緩慢可能會導致更高的跳出率、更低的參與度，最終對 SEO 產生負面影響。如果您使用 Laravel 和 JavaScript，您可以實作多種策略來優化圖片載入並確保您的 Web 應用程式發揮最佳效能。在這篇文章中，我們將探索使用 Laravel 和 JavaScript 更快載入圖像的各種技術。
在深入研究程式碼級最佳化之前，有必要從影像本身開始。大圖像檔案是頁面加載緩慢的最常見原因之一。以下是上傳圖像之前優化圖像的一些技巧：
Laravel 附帶了強大的工具，可以幫助您有效地管理和最佳化映像。幹預圖像包對於此目的特別有用。
use Intervention\Image\Facades\Image;
use Illuminate\Support\Facades\Cache;
public function show($id)
{
$image = Cache::remember("image_$id", 60, function() use ($id) {
return Image::make(storage_path("app/public/images/$id.jpg"))->resize(800, 600)->encode('jpg');
});
return response($image)->header('Content-Type', 'image/jpeg');
}
$image = Image::make('public/foo.jpg')->resize(300, 200);
return $image->response('jpg');
延遲載入將映像的載入推遲到即將進入視窗時，這可以大大減少頁面的初始載入時間。
<img src="image.jpg" loading="lazy" alt="Lazy Loaded Image">
document.addEventListener("DOMContentLoaded", function() {
let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
let active = false;
const lazyLoad = function() {
if (active === false) {
active = true;
setTimeout(function() {
lazyImages.forEach(function(lazyImage) {
if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove("lazy");
lazyImages = lazyImages.filter(function(image) {
return image !== lazyImage;
});
if (lazyImages.length === 0) {
document.removeEventListener("scroll", lazyLoad);
window.removeEventListener("resize", lazyLoad);
window.removeEventListener("orientationchange", lazyLoad);
}
}
});
active = false;
}, 200);
}
};
document.addEventListener("scroll", lazyLoad);
window.addEventListener("resize", lazyLoad);
window.addEventListener("orientationchange", lazyLoad);
});
CDN 將您的映像分發到全球多個伺服器上，因此使用者可以從距離其位置最近的伺服器下載它們。這可以減少延遲並加快圖像載入速度。
Storage::disk('s3')->put('path/to/image.jpg', $imageContent);
$cdnUrl = Storage::disk('s3')->url('path/to/image.jpg');
WebP 是一種現代影像格式，可為網路上的影像提供卓越的無損和有損壓縮。透過以 WebP 格式提供圖像，您可以在不犧牲品質的情況下顯著減小檔案大小。
use Spatie\Image\Image;
use Spatie\Image\Manipulations;
Image::load('image.jpg')
->format(Manipulations::FORMAT_WEBP)
->save('image.webp');
<picture> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt="Fallback Image"> </picture>
透過延遲螢幕外影像，您可以確保僅先載入立即可見的影像，而稍後載入其他影像。
document.addEventListener('DOMContentLoaded', function() {
let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
function isInViewport(el) {
const rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
function deferImageLoading() {
lazyImages.forEach(image => {
if (isInViewport(image)) {
image.src = image.dataset.src;
image.classList.remove('lazy');
}
});
}
window.addEventListener('scroll', deferImageLoading);
window.addEventListener('resize', deferImageLoading);
window.addEventListener('load', deferImageLoading);
});
優化 Laravel 和 JavaScript 專案中的映像載入對於提供快速回應的使用者體驗至關重要。透過壓縮圖片、利用延遲載入、使用 CDN、實作 WebP 格式以及優化 CSS 和 JS 文件，您可以顯著縮短網站上圖片的載入時間。請記住，我們的目標是平衡影像品質與效能，為您的用戶創造無縫體驗。
立即開始實施這些策略，看看您網站的效能有何不同！
享受吧！
以上是在 Laravel 和 JavaScript 中更快地載入圖像的詳細內容。更多資訊請關注PHP中文網其他相關文章！
