实验介绍

我们在浏览图片较多的网页时，有没有想过这些图片是如何成功展示的呢？比如像这样的图片素材网站：

这样的网页拥有成千上万的图片资源，如何优化网页性能成为了开发人员不得不思考的技术问题。

不难发现，每当我们下拉网页的滚动条到底部时，可视部分的图片资源才开始解析，如此一来能够大大的减少服务器的压力，优化网页性能的同时也能提升用户体验。这样的技术也就是本实验想为大家介绍的——图片懒加载。

在开始学习图片懒加载之前，课程先会介绍图片预加载技术，通过这两种技术的学习做出对比，更能体现出懒加载是如何有效的提升页面性能的。本实验是基于 JQuery 编程语言来实现的，所以学员需要在实验开始前学习 JQuery 的基础知识。

知识点

不对加载资源做处理的图片相册
图片加载之预加载技术
预加载原理
使用 JQuery 完成图片预加载
图片加载之懒加载技术
懒加载原理
使用 JQuery 完成图片懒加载

图片加载

网页中丰富的图片资源带给用户更好体验的同时，也降低了我们的性能，减慢了加载速度。如果不对图片资源做任何处理，就会出现当前的图片已经加载完，但是滑到下一张时图片未加载完成，呈现一种假死的状态，用户体验很不友好。

常用到的加载方式，分为两种：预加载和懒加载。

预加载

预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。

为什么要使用预加载

在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白或没有变化，直到所有内容加载完毕。

使用预加载解决之前的问题

之前的图片相册我们并未对图片资源进行任何性能优化，导致出现当前的图片已经加载完，但是滑到下一张时呈现一种假死状态的问题，用户体验很不友好。

解决办法：让图片相册快速无缝隙的展示，在等待过程中显示正在加载的文字或者图片，等所有资源加载完成后再一次性展示。

预加载预览效果

懒加载

懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。用户滚动到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。常适用图片很多，页面很长的电商网站场景中。

为什么使用懒加载

1.提升用户体验
不妨设想下，用户打开像淘宝这样的长页面的时候，如果页面上所有的图片都使用预加载，因为图片数目较大而导致等待时间很长，用户难免会心生抱怨，这就严重影响用户体验。

2.减少无效资源的加载
如果我们只加载自己所看到的部分，这样能明显减少了服务器的压力，也能够减小浏览器的负担。

3.防止并发加载的资源过多会阻塞 js 的加载
过多的资源加载会阻塞 JS 的加载以至于影响网站正常使用。

懒加载预览效果

在实验楼的新课《JQuery 实现网页图片懒加载》中，作者使用 JGquery 编程语言，分别实现了①完成图片相册、②图片预加载、③图片懒加载，感兴趣的话，就快点击课程开始学习吧！

图片太多加载过慢？学学图片懒加载吧相关推荐

什么是hibernate懒加载？什么时候用懒加载？为什么要用懒加载？
所谓懒加载(lazy)就是延时加载,延迟加载. 什么时候用懒加载呢,我只能回答要用懒加载的时候就用懒加载. 至于为什么要用懒加载呢,就是当我们要访问的数据量过大时,明显用缓存不太合适, 因为内存容量有 ...
mysql 懒加载数据_jpa如何懒加载大字段，懒加载之后又如何获取懒加载字段
前言:对于大字段,我们在查询列表的时候不需要查询,但是修改的时候有需要展示大字段内容,怎么办问1.jpa如何懒加载大字段?即查询列表的时候不查询出来问2.懒加载之后又如何获取懒加载字段.比如,在后 ...
html如何实现页面懒加载,浏览器HTML自带懒加载技术
对于目前的图浏.富混工就划这些本公的响示近览记的迹更片懒加载,我们一般采用的是通过第三方库或懒加载库来实现,但是该方式的显著问题就是,必须按插者几天网后供小来剑思含程个些结十在必页到别则气底.时效器按 ...
html 语音懒加载,浏览器HTML自带懒加载技术
对于目前的图片懒加载,我们一般采用的是通过第三方库或懒加载库来实现,但是该方式的显著问题就是,必须按顺序执行: 1.加载初始的 HTML 响应内容 2.加载懒加载库 3.加载图片假如浏览器能直接支持 ...
vue实现路由懒加载，react实现路由懒加载
组件懒加载也叫按需加载: 当打包构建应用时,js 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 打包 bui ...
webpack实现懒加载原理以及如何使用懒加载优化项目
参考: 清晰易懂,可以先看这个:webpack的异步加载原理及分包策略 webpack中的懒加载代码原理解析:https://segmentfault.com/a/1190000020233387 自 ...
微信图片太模糊如何弄清晰？微信图片过期怎么恢复原图
微信中的图片当时看的时候还是非常清晰的,但过了一段时间再看却变得十分模糊.所以,微信图片太模糊了如何才能变得清晰呢?很多人不仅是变得模糊而且还显示图片已过期,导致图片也看不到了.那么我们微信聊天中,微 ...
vue el-tree懒加载默认展开一级，懒加载刷新（默认高亮某个节点，触发某个节点的点击事件）
场景如上图所示,左边展示分组及分组下的标签,点击某个标签,在右边展示某个标签的详情,可以对标签内容进行编辑保存,还可对标签进行搜索,默认展示全部标签,展开一级不目下标签,若对标签进行搜索筛选,则把每 ...
C语言界面列表的滑动效果,jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)...
本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/ ...
ecplise插入图片太大_【Excel里插入图片时很大怎么办？我想把他设置成自动适应表格的大小。】excel图片固定大小...
excel插入自适应单元格大小图片 excel入的图片可以设置自适应单元格大小而变化,具体操作如下: 一.使具:excel2010 二.操作步骤: 1.进入excel2010,点击"插入&q ...

图片太多加载过慢？学学图片懒加载吧