背景
- 这个我今天才知道还有这玩意，虽然这个技术用的有点不多了。
- 我一开始听感觉好像没什么卵用，后来发现特定地方可以用用。
- 主要讲原理和应用，这个实现起来有很多方式。
原理
- 浏览器加载图片时请求会根据Img的src来请求图片，如果这个src事先已经请求过的，那么浏览器会直接拿缓存里的图片，而不会再次发起请求。所以有些地方图片src不变但图片换了个浏览器就不知道（比如用户多次上传图片），一般是url加个时间戳随机数什么的解决。
- 这个预加载就利用这个缓存原理，事先找个地方偷偷藏起来加载，不让你看见，实际浏览器已经把这个图片拿到了，等到你真正看见这个图片的时候，图片已经渲染出来了。
应用
- 这个实际会让用户多请求很多图片，一般是用在后续页面图片确定的情况。先保证用户把当前页面图片加载完成，然后加载后续页面图片。
- 或者是利用加载完成事件来做过度动画和过度页面，这样体验感也非常好。
例子
- 这个实现方法很多，图片藏起来加载即可，发请求也不一定用图片src，ajax什么的也行。
- 通用例子，加载完成后一次显示图片，用slow3g可以看到明显区别：
<body>
<div class="pie">
<div class="img"></div>
</div>
<script type="text/javascript">
if (document.images) {
img1 = new Image();
img1.src = "http://img5.imgtn.bdimg.com/it/u=2298824648,1812234339&fm=200&gp=0.jpg"
}
img1.onload=function () {
$('.img').append(img1)
}
</script>
</body>
12万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
