2024年网页设计加载图片代码 篇1
由于图像是Web上最流行的内容之一，因此网站上的页面加载时间很容易成为问题。
即使进行了适当的优化，图像也可能占很大的比重。这可能会对访问者必须等待才能访问您网站上的内容的时间产生负面影响。除非您想出一种不会干扰速度感知的图像加载解决方案，否则它们很可能会耐心地在其他地方导航。
在本文中，您将了解四种延迟加载图像的方法，可以将它们添加到Web优化工具包中以改善网站上的用户体验。
什么是延迟加载？
延迟加载图像是指异步加载网站上的图像-也就是说，在完全容纳首屏内容之后，甚至有条件地，仅当它们出现在浏览器的视口中时才可以加载图像。这意味着，如果用户没有完全向下滚动，则位于页面底部的图像甚至都不会被加载。
许多网站都使用这种方法，但是在图片繁多的网站上尤其明显。尝试浏览您喜欢的在线狩猎场以获得高分辨率照片，您很快就会意识到该网站仅加载有限数量的图像的方式。向下滚动页面时，您会看到占位符图像迅速填充真实图像进行预览。例如，请注意Unsplash.com上的加载程序：将页面的该部分滚动到视图中会触发使用全分辨率照片替换占位符：
为什么要关心延迟加载图像？
至少有两个极好的原因，您应该考虑为网站延迟加载图像：如果您的网站使用JavaScript来显示内容或向用户提供某种功能，则快速加载DOM变得至关重要。脚本通常要等到DOM完全加载后才能开始运行。在包含大量图像的网站上，延迟加载（或异步加载图像）可能会导致用户停留或离开您的网站有所不同。由于大多数延迟加载解决方案都是通过仅在用户滚动到在视口内可见图像的位置时才加载图像来工作的，因此如果用户从未到达该点，则将永远不会加载这些图像。这意味着可以节省大量带宽，为此，大多数用户，尤其是那些在移动设备上访问网络和连接缓慢的用户，将非常感谢您。
好吧，延迟加载图像有助于提高网站性能，但是最好的解决方法是什么？
没有完美的方法。如果您很会使用JavaScript，那么实现自己的延迟加载解决方案就不会成为问题。没有什么比您自己编写代码给您更多的控制了。
或者，您可以浏览网络以找到可行的方法并开始进行试验。我就是这样做的，并且遇到了这五种有趣的技术。使用Intersection Observer API的延迟加载
该路口观察API是一个现代化的界面，你可以利用的延迟加载图片和其他内容。
换句话说，被异步监视的是一个元素与另一个元素的交集。
Denys Mishunov在Intersection Observer和使用它延迟加载图像方面都有很好的教程。这就是他的解决方案。
假设您要延迟加载图片库。每个图像的标记如下所示：
请注意，图像的路径是如何包含在data-src属性（而不是src属性）中的。原因是使用src意味着图像将立即加载，这不是您想要的。
在CSS中，为每个图像赋予一个min-height值，例如100px。这为每个图像占位符（不带src属性的img元素）提供一个垂直尺寸。
该解决方案的优点：实现起来轻而易举，非常有效，并且使crossObserver可以在计算方面进行繁重的工作。
另一方面，尽管大多数浏览器都支持Intersection Observer API最新版本，但并非所有浏览器都始终支持它。幸运的是，可以使用polyfill。
罗宾·奥斯本（Robin Osborne）逐渐增强的延迟加载
罗宾•奥斯本（Robin Osborne）提出了一种基于渐进增强的超级巧妙的解决方案。在这种情况下，使用JavaScript实现的延迟加载本身被认为是对常规HTML和CSS的增强。
为什么要逐步增强？好吧，如果您使用基于JavaScript的解决方案显示图像，如果禁用了JavaScript或发生了导致脚本无法按预期工作的错误，该怎么办？在这种情况下，如果不进行逐步增强，用户可能根本看不到任何图像。
你可以看到奥斯本的这一解决方案的一个基本版本的细节笔，以及更全面的一个，它考虑到情况下破的JavaScript，在这种其它这里笔。
此技术具有许多优点：渐进增强方法可确保用户始终可以访问内容。它不仅可以解决无法使用JavaScript的情况，而且还可以解决JavaScript 损坏的情况：我们都知道容易出错的脚本，尤其是在运行大量脚本的环境中。它会懒惰地滚动加载图像，因此，如果用户未滚动到浏览器中的位置，则不会加载所有图像。它不依赖任何外部依赖关系，因此不需要框架或插件。Lozad.js
实现图像的延迟加载的一种快速简便的替代方法是让JS库为您完成大部分工作。
Lozad是纯JavaScript中的高性能，轻量且可配置的惰性加载器，没有任何依赖关系。您可以使用它来延迟加载图像，视频，iframe等，并且它使用Intersection Observer API。
您可以将Lozad包含在npm / Yarn中，并使用所选的模块捆绑器将其导入。延迟加载具有模糊的图像效果
您首先看到的是图像的模糊，低分辨率副本，而其高分辨率版本则被延迟加载：
网站上的占位符图像模糊。
网站上的高分辨率，延迟加载的图像。
您可以通过多种方式来延迟加载具有这种有趣的模糊效果的图像。
我最喜欢的技术是Craig Buckler。这是此解决方案的全部优点：性能：仅463字节的CSS和1,007字节的最小JavaScript代码支持视网膜屏幕无依赖关系：不需要jQuery或其他库和框架逐步增强功能以抵消较旧的浏览器和JavaScript失败到此为止，您可以采用以上这四种延迟加载图像的方法来开始尝试并在项目中进行测试，可以大大提高读者的用户体验和阅读兴趣。
2024年网页设计加载图片代码 篇2
回答这个问题之前，我专门去实际测试了一下一些知名网站的加载时间，得出的结果其实还是蛮震惊的，大家且跟着往下看。苹果官网为什么快？Google主推的图片格式
你仔细去看的话就会发现，苹果官网图片加载快大概有几个原因。
第一：苹果官网的图片大多数比较单纯的色系，苹果的审美一直都是一样比较纯粹的纯色系，苹果官网的图片排列也是很有哲学的，基本上一屏只会放一张或者很少的图片。
第二：苹果官网的图片基本上都没有特别大，图片压缩都做得很好的，即使是苹果Newsroom媒体专用素材，图片也不会特别大，不过大多数网站也都会严格控制图片的大小，同样很明显苹果在刻意注意这点。
第三：苹果采用了CDN节点加速，苹果现在贵州也有服务器，基本上都会把一些国内的服务往国内放，CDN加速你访问的都是离你比较近的节点，这样访问起来自然也就快了。
Google早在2010年的时候就已经推出了一个WebP的文件新格式，之前PNG、JPEG、GIF等常见图片格式其实已经到了优化极限，不过Google当时对这些格式都不太满意，相对于JPEG图片格式可以减小40%，而整个网络流量中有接近70%的流量都是图片。
这可以为网站节省大量的带宽，同时还能够大幅度提高网页加载速度，YouTube实际测试中，使用WebP视频缩略图网页加载速度提升了10%，Google+采用WebP图片格式，每天节省了超过50TB空间。目前包括Netflix、Facebook、Tinder、Ebay、腾讯、美团、淘宝等都在尝试这种格式，并且在某些网站上提升是比较明显的。一些网站的实际比较
整体来说，一家网站背后的服务器、网络带宽会是决定网站加载速度的重要因素，代码质量当然也非常重要，不过大多数网站到了一定规模之后，代码质量都不会太差，这种级别的企业都会有顶尖工程师，所以最终技术水平是体量上的差距。举个例子百度、阿里、腾讯这种企业顶尖工程师的数量，肯定要比美团、字节跳动、快手这种企业的数量要多一些。大企业的服务器、网络带宽肯定总体要优于小企业，小企业就可能因为这些原因体验变差很多。
闲话少说言归正传，我主要试了一下国内外一些主流站点的加载速度，按照不同类型进行划分，大概进行了一些比较，浏览速度快慢结果如下。测试国外网站大多是在用梯子的前提下，因此我实际情况可能国外网站还会更快一点。
电商网站：亚马逊>Ebay>淘宝>京东=当当=严选。亚马逊和Ebay明显要好于国内的电商网站，亚马逊和Ebay首页结构比较简单，功能比较清晰，首页一个轮播图，下面不会有太多内容出来，需要滑到下一页才能看到更多内容，基本上很快就能加载出来。国内电商网站淘宝和京东风格类似，功能虽然也明确，但是真的是非常复杂，恨不得首页就要把淘宝所有的功能包括了，图片也是花里胡哨、乱七八糟，加载很明显的感觉到层次感。网易严选、网易考拉有点欧美网页设计哲学，不过加载速度确实是慢，当然可能图片本身比较大。
图片网站、素材网站：Pinterest=花瓣网>Behance>>Dribbble。这个也非常明显的差距，其中Pinterest和Behance的表现是超过了我的预期的。花瓣和Pinterest是典型的瀑布流设计，照片流其实容量还是很大的，不过访问速度真的是超级快，尤其是Pinterest在我挂梯子的前提下还是非常快，Behance作为一个高清资源站点，访问速度也超过了我的预期，毕竟是Adobe旗下的网站，Dribbble确实慢，并且是相当的慢。
社交网站：Facebook>微博>twitter>Tumblr。做完这个测试，我是真的理解到了扎克伯格的产品哲学，扎克伯格有句话非常出名，完成比完美更重要，毫无疑问Facebook就是这样的网站，我们也都知道Twitter更多的是设计导向的网站，而Facebook更多是工程导向的网站，Facebook访问速度确实极快。Tumblr访问比较慢，我认为是小公司和梯子的综合因素，可能国外会更快一点。
不管是苹果的处理方式还是Google的处理方式，我认为都比较合理，不过总体来说，苹果不太会采用Google的方式，Google的方式则会成为几乎互联网行业的通用解决方案。