如何把网站图片优化与快速加载做到极致
发布网友
发布时间：2022-04-25 12:34
共2个回答
懂视网
时间：2022-05-12 14:37
本篇文章给大家带来的内容是关于图片懒加载是什么意思？图片懒加载的实现方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
所谓懒加载，是为了提高网页的打开的速度，获得更好用户体验的一种手段。其选择的重要的部分先加载，次要的部分需要的时候再加载。比如一个电商网站，首屏通常有很多的数据，清晰度较高的 banner 或轮播。页面非首屏部分会员很多商品夹杂着大量的图片。这是时候选择懒加载以保证首屏的流畅十分重要。
本文仅仅简单的举例图片的懒加载，是性能优化的入门的篇章，方法比较简单明了，只要有一点 js 基础就一定能看懂。
废话不多说
<img src="img/pic_error.jpg" class="img-delay" src="img/banner.png" />
首先，对于非首屏的图片添加了 class="img-delay" 和 src属性，后者用来放置图片原始 url 地址的属性，对于图片本身的 src 属性，可以选择空着，或者添加一个”图片无法显示“的提示性图片，像天猫这样：
之后我们需要做的就是，当用户下滑到哪里就显示哪里的图片（提前一点点显示更好，这里不做提前了）
//首先你需要引入一个 jQuery 库
//获取需要延迟加载的图片
var $picDelay = $(".img-delay");
//在 window 上监听滑动事件
$(window).scroll(function(){
var scrollTop = $(window).scrollTop(); //滑块划过的距离
var screenHeight = screen.height; //屏幕浏览器内容部分的高度
//计算每个图片的位置是否符合要求
$picDelay.each(function(idx, ele){
var $ele = $(ele);
//当scrollTop + screenHeight === ele.offsetTop时图片刚好出现上边沿
if(scrollTop + screenHeight >= ele.offsetTop){
$ele.attr("src", $ele.attr("src")).removeAttr('src').removeClass("img-delay");
}
});
//当所有图片都加载了以后，移除这个事件
if($(".img-delay").length <= 0){
$(window).unbind("scroll");
}
});
热心网友
时间：2022-05-12 11:45
网站图片优化的重要性
网站图片的使用在提升用户阅读体验和网站整体的视觉设计效果都是有非常大的提升和帮助，以至于在网页设计上面几乎每一个文章链接都会调用文章缩略图，从而也就存在一个潜在且影响用户体验的问题。
网页中加载的图片越多，对于网站主和访客用户来说，都是对服务器和本地网络资源的极大浪费，同时也拉低了网站的打开速度，及时视觉效果方面提升了，但性子急的用户可以早就选择离开而看不到了。
图片懒加载的必要性
网站图片优化的重要性就体现在了网站整体的加载速度，虽然我们可以通过CDN加速或者提升服务器带宽，这无疑是增加了网站运营成本，而同样会浪费用户的带宽或流量，虽然可能用户并不能察觉到，但是既然是子凡这个追求极致的人来说，这点是绝对不能容忍的。
所以图片懒加载的必要性就体现出来了，懒加载的方式就是把用户能看到的页面中的图片第一时间渲染并加载，那么非首屏外的图片，当用户翻页或者滚动到可是区域时在实时的加载，可以说是真正的做到了按需加载吧，这样从本质上来减少图片对服务器带宽的压力，以及对用户的最佳考虑，更是提升网站首屏打开速度的一个好方法。
如何将网站图片优化做到极致？
对于网站图片优化的重要性已经不言而喻，而图片懒加载的重要性也就更不用多说，针对与网站图片的优化，我们在如何利用懒加载的方式来做到页面的最佳化呢？
01、首先我们需要知道整个网站或者一个页面中在哪些板块会出现图片，因为各个网站的不同，子凡这里就以一种最通用的页面来举例：
02、其中首页一般顶部第一个是LOGO图片，这个应该是没有必要做懒加载的，因为LOGO肯定是会在首屏显示和第一时间加载的；
03、然后可能就是幻灯效果或者是大图的展现效果，如果图片是在首屏的话做懒加载就没有必要了，可以选择直接引入或者css内链样式以背景的方式引入图片；
04、接着就是左侧的文章列表以及右侧的推荐文章等相关的内容和缩略图，这些地方的图片就是做懒加载的必要地方；
