在 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中文网其他相关文章！
