懒加载与预加载通俗的讲就是：当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片

什么是图片懒加载？

通俗的讲就是：当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。

为什要使用图片懒加

比如一个页面中有很多图片，如淘宝、京东首页等等，如果一上来就发送这么多请求，页面加载就会很漫长，这就会造成三个问题，第一个问题是其实很多图片可能用户都没有浏览到而需要加载造成资源的浪费，第二个问题是如果加载的图片资源很多，每个浏览器同一个域名下并发资源请求是有一定上限的，这就会造成其他js和css资源文件的请求阻塞。第三个问题是对服务器的压力

因此优点就很明显了：不仅可以减轻服务器的压力，而且可以让加载好的页面更快地呈现在用户面前（用户体验好）。以下是原生js实现的懒加载功能

js代码如下

var viewHeight=document.documentElement.clientHeight
 function lazyload() {
     var eles = document.querySelectorAll('img[data-original][lazyload]')
     Array.prototype.forEach.call(eles, function (item, index) {
          var rect
         if(item.dataset.original==='')
         {
             return
         }
         rect=item.getBoundingClientRect()
         if( rect.top< viewHeight)
         {
             !function(){
                 var img=new Image()
                 img.src=item.dataset.original
                 img.onload=function(){
                     item.src=img.src
                 }
                 item.removeAttribute('data-original')
                 item.removeAttribute('lazyload')
             }()
         }
     })
 }
lazyload()
document.addEventListener('scroll',lazyload)

html代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .image-item{
            width:40%;
            margin-right: 5%;
            display: inline-block;
            height: 400px;
            background: grey;
        }
        .image-list{
            margin-left: 5%;
        }
    </style>
</head>
<body>
<div class="image-list">
    <img src="" class="image-item"  lazyload="true" data-original="https://img10.360buyimg.com/mobilecms/s1960x600_jfs/t21313/257/541053748/258521/b174097c/5b10ea78N6c3eaf26.jpg" >
    <img src="" class="image-item"  lazyload="true" data-original="https://img11.360buyimg.com/mobilecms/s400x290_jfs/t20356/252/590712251/24515/bbfca861/5b129bd0N1f9fe21a.jpg" >
    <img src="" class="image-item"  lazyload="true" data-original="https://img11.360buyimg.com/mobilecms/s400x290_jfs/t22015/47/705064174/9955/48cf94c6/5b1546afNc5d52595.jpg" >
    <img src="" class="image-item"  lazyload="true" data-original="https://img10.360buyimg.com/mobilecms/s500x500_jfs/t14581/123/1031749630/261455/2b01e587/5a434789N73be71c3.jpg" >
    <img src="" class="image-item"  lazyload="true" data-original="https://img11.360buyimg.com/mobilecms/s500x500_jfs/t21202/160/480243187/368695/e253161c/5b0e658eN9e9c82f7.jpg" >
    <img src="" class="image-item"  lazyload="true" data-original="https://img12.360buyimg.com/mobilecms/s500x500_jfs/t991/73/649364781/809456/dc7e294e/55399d2cN3b73238b.jpg" >
    <img src="" class="image-item"  lazyload="true" data-original="https://img13.360buyimg.com/mobilecms/s500x500_jfs/t21565/297/425641319/201551/4e4a1a6c/5b0d2305N0a1e408c.jpg" >
    <img src="" class="image-item"  lazyload="true" data-original="https://img10.360buyimg.com/mobilecms/s500x500_jfs/t20680/79/556933583/197464/97bca160/5b112516N01a1b1a9.jpg" >
    <img src="" class="image-item"  lazyload="true" data-original="https://img11.360buyimg.com/mobilecms/s500x500_jfs/t20821/311/365760157/190759/605ae18/5b0bcbb1Nad7e311a.jpg" >
    <img src="" class="image-item"  lazyload="true" data-original="https://img12.360buyimg.com/mobilecms/s500x500_jfs/t20875/287/397181404/527546/a9d79186/5b0bd385N7b158abf.jpg" >
    <img src="" class="image-item"  lazyload="true" data-original="https://img13.360buyimg.com/mobilecms/s500x500_jfs/t3112/45/1648551314/71895/d706b323/57d111a6Nf34f4be0.jpg" >
</div>
<script src="lazyload.js"></script>
</body>
</html>

以上便可以实现图片懒加载效果

预加载

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

使用HTML标签进行预加载

<img src="http://pic26.nipic.com/20121213/6168183 0044449030002.jpg" style="display:none"/>

使用Image对象进行预加载

var image= new Image()
image.src="http://pic26.nipic.com/20121213/6168183 004444903000 2.jpg"

使用XMLHttpRequest对象,虽然存在跨域问题，但会精细控制预加载过程

var xmlhttprequest=new XMLHttpRequest();
xmlhttprequest.onreadystatechange=callback;
xmlhttprequest.onprogress=progressCallback;
xmlhttprequest.open("GET","http://image.baidu.com/mouse,jpg",true);
xmlhttprequest.send();
function callback(){
 if(xmlhttprequest.readyState==4&& xmlhttprequest.status==200){
   var responseText=xmlhttprequest.responseText;
 }else{
    console.log("Request was unsuccessful:"+xmlhttprequest.status);
 }
}
function progressCallback(e){
e=e || event;
if(e.lengthComputable){
console.log("Received"+e.loaded+"of"+e.total+"bytes")
}
}