Question

JS实现图片预加载是什么意思？是要实现怎么样的效果？

看网上的越看越迷糊，我知道图片延迟加载，但这个预加载就不知道什么用处了。
网站打开时，你预加载图片不还是要慢么？这是要实现一下显示出图片的效果么？
望好心人指点,谢谢

Answer 1

是的，预加载会减慢网页打开速度，但是一但打开了话，后面就会很流畅了。楼上的仁兄说的很清楚，跟你举个形象的例子吧，比如40分钟的电视剧，要加10分钟的广告，你是希望先加10分钟，然后很流畅的看电视剧呢，还是希望一开始不加，然后每隔10分钟加2分钟的广告呢？

Answer 2

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览网站内容时获得更好的用户体验。
示例代码：
function loadImage(url, callback) {
var img = new Image(); //创建一个Image对象，实现图片的预下载
img.src = url;
if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
callback.call(img);
return; // 直接返回，不用再处理onload事件
}
img.onload = function () { //图片下载完毕时异步调用callback函数。
callback.call(img);//将回调函数的this替换为Image对象
};
};

Answer 3

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览网站内容时获得更好的用户体验。
示例代码：
function loadImage(url, callback) {
var img = new Image(); //创建一个Image对象，实现图片的预下载
img.src = url;
if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
callback.call(img);
return; // 直接返回，不用再处理onload事件
}
img.onload = function () { //图片下载完毕时异步调用callback函数。
callback.call(img);//将回调函数的this替换为Image对象
};
};

Answer 4

为了能给用户更好的体验
延迟加载能让用户更快的看到页面效果，针对那些不需要一开始就显示出来的图片，例如图片滚动，滚动也需要一定的时间，所以可让后面的图片延迟一段时间再加载进来，但是也许要控制加载时间，不能出现图片显示给用户的时候还没有加载
在写css样式的时候，可能有很多地方都使用了background背景图片，但是不是每个图片都会加载，这时候如果某一个效果需要更换背景图片，那么图片会临时去加载，这样会出现图片需要一段时间才能显示出来，用户体验就会变差，所以图片需要预加载。