http请求 如果你学过计算机网络你就会知道，我们请求一个带有n张图片的html文件实际上会发送n+1次请求，因为在浏览器解析html的时候遇到了src，就会请求src后面的内容。 设想一下如果我们的页面有1000000张图片，那么如果等待这些图片响应成功并加载完时延是非 ...

所谓预加载，就是提前加载了图片。 有时候会加载一些在当前页面没有用到的图片，是为了提前加载到缓存里，这样后面的页面就可以直接从缓存读取了。 加载大图的时候，我们可以先显示模糊的缩略图，等到大图加载完了，再把缩略图替换掉，这样填补了图片加载期间的空白时间。 image也有onload ...

一、前言 为啥要对图片使用懒加载？我们首先来聊聊这个问题，对于页面来说架子啊速度影响着最大的就是图片，一张普通的图片可以达到4-5M的大小，而代码压缩也就只有几十KB。当页面图片过多的时候，页面加载速度很缓慢，一个页面加载几秒没有完成，用户体验不好，会丧失很多用户的。 所以对于图片过多的页面 ...

预加载 1.什么是预加载 资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。 2.为什么要用预加载 在网页全部加载之前，对一些主要内容进行加载 ...

　　目录 使用jQuery图片预加载(延迟加载)插件Lazy Load 使用JS实现图片预加载 使用CSS实现图片预加载 使用Ajax实现图片预加载 1. 使用jQuery图片预加载(延迟加载)插件Lazy Load Lazy Load也叫惰性加载，延迟加载，顾名思义 ...

是什么？ 　　浏览器会缓存静态资源（hmtl/css/img等）。图片预加载就是让浏览器提前缓存图片，提升用户体验。 浏览器什么情况下会下载图片？ 　　1，解析到html中img的src属性的时候 　　2，解析到background-image属性的url()的时候 　　3，在js中创建 ...

预加载 常用的是new Image();，设置其src来实现预载，再使用onload方法回调预载完成事件。 测试用例： 当图片加载过一次以后，如果再有对该图片的请求时 ...

一、效果图如下 上面的效果图，效果需求如下 1、还没加载图片的时候，默认显示加载图片背景图 2、刚开始进入页面，自动加载第一屏幕的图片 3、下拉界面，当一张图片容器完全显露出屏幕，即刻加载图片，替换背景图 4、加载 ...