图片预加载即提前加载图片，可保证图片快速、无缝地发布，用户需要查看时可直接从本地缓存中渲染，适用于图片占据很大比例的网站。
方法1,在CSS background中加载：会增加页面的整体加载时间
#preload-01 { background: url(-01.png) no-repeat -9999px -9999px; }#preload-02 { background: url(-02.png) no-repeat -9999px -9999px; }
方法2，JS new image对象，设置src加载：
function preloader() {if (document.images) {var img1 = new Image();var img2 = new Image();var img3 = new Image();img1.src = ";;img2.src = ";;img3.src = ";;}}function addLoadEvent(func) {var oldonload = window.onload;if (typeof window.onload != 'function') {window.onload = func;} else {//onload中未挂载函数才执行该JSwindow.onload = function() {if (oldonload) {oldonload();}func();}}}addLoadEvent(preloader);div.appendChild(img1);//插入到DOM
方法3，Ajax预加载,new Image()对象设置src
window.onload = function() {setTimeout(function() {// XHR to request a JS and a CSSvar xhr = new XMLHttpRequest();xhr.open('GET', url;);xhr.send();xhr = new XMLHttpRequest();xhr.open('GET', url;);xhr.send();// preload imagenew Image().src = ";;}, 1000);};
懒加载：将图片src赋值为一张默认图片，当用户滚动滚动条到可视区域图片时候，再去加载真正的图片
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Lazyload 2</title><style>img {display: block;margin-bottom: 50px;height: 200px;}</style></head><body><img src="images/loading.gif" data-src="images/1.png"><img src="images/loading.gif" data-src="images/2.png"><img src="images/loading.gif" data-src="images/3.png"><img src="images/loading.gif" data-src="images/4.png"><img src="images/loading.gif" data-src="images/5.png"><img src="images/loading.gif" data-src="images/6.png"><img src="images/loading.gif" data-src="images/7.png"><img src="images/loading.gif" data-src="images/8.png"><img src="images/loading.gif" data-src="images/9.png"><img src="images/loading.gif" data-src="images/10.png"><img src="images/loading.gif" data-src="images/11.png"><img src="images/loading.gif" data-src="images/12.png"><script>function throttle(fn, delay, atleast) {//函数绑定在 scroll 事件上，当页面滚动时，避免函数被高频触发，var timeout = null,//进行去抖处理startTime = new Date();return function() {var curTime = new Date();clearTimeout(timeout);if(curTime - startTime >= atleast) {fn();startTime = curTime;}else {timeout = setTimeout(fn, delay);}}}function lazyload() {var images = document.getElementsByTagName('img');var len = images.length;var n= 0;//存储图片加载到的位置，避免每次都从第一张图片开始遍历 return function() {var seeHeight = document.documentElement.clientHeight;var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;for(var i = n; i < len; i++) {if(images[i].offsetTop < seeHeight + scrollTop) {if(images[i].getAttribute('src') === 'images/loading.gif') {images[i].src = images[i].getAttribute('data-src');}n = n + 1;}}}}var loadImages = lazyload();loadImages();//初始化首页的页面图片window.addEventListener('scroll', throttle(loadImages, 500, 1000), false);//函数节流（throttle）与函数去抖（debounce）处理,//500ms 的延迟，和 1000ms 的间隔，当超过 1000ms 未触发该函数，则立即执行该函数，不然则延迟 500ms 执行该函数</script></body></html>
