js图片预加载

介绍：当一个页面打开有过多图片需要加载的时候，它的速度就会很慢，这个时候我们就需要预加载。

1、预加载就是图片在看不见的时候还未加载，但是img标签的src属性会一开始就将图片全部加载完毕，所以我们自定义一个属性为data-url里面添加链接

<div class="my-photo"><img data-url="img/4.jpg" alt="img/4.jpg" /></div>

2、计算元素位置

需要的几个高度

可视区域高度（网页窗口的高度）：document.documentElement.clientHeight

鼠标滚动的距离：document.documentElement.scrollTop

元素到页面顶部的距离：imgs[i].offsetTop

公式：元素到页面顶部的距离-鼠标滚动的距离<可视区域高度（代表元素进入了可视范围）

3、获取自定义属性中的链接把它赋给scr属性，没有效果

原因：我们的img标签没有src属性，所以获取不到，也无法赋值

解决办法：使用添加属性的方法，将src和data-url中的链接添加到标签中

var dataUrl=imgs[i].getElementsByTagName("img")[0].getAttribute('data-url');

img.setAttribute('src',dataUrl);

大概思路写好了，我那是一个高兴啊，结果发现下拉没有办法自己显示，必须要手动刷新才显示。

-_-||这是什么鬼，手动预加载吗？这么鸡肋(╯‵□′)╯︵┻━┻，肯定不是这样的啦！

4、无法自动刷新

解决方案：在页面打开和鼠标滚动的时候加载预加载函数

window.onload = function() {

ImgToWatch();

};

window.onscroll = function() {

ImgToWatch();

};

这样就可以了！

but又发现一个问题，当网页页面小的时候，被拉大，下面的图片没有加载，只有当鼠标滚动再次被触发时才出现！

5、网页页面小的时候拉大，不能将图片加载出来

解决方案：使用窗口调整事件触发

window.onresize = function() {

ImgToWatch();

};

啦啦啦，♪(^∇^*)，这样就好了，下面附上完整的代码

html部分:

 <div class="my-photo"><img data-url="img/1.jpg" alt="a.gif" /></div>
  <div class="my-photo"><img data-url="img/2.jpg" alt="a.gif" /></div>
  <div class="my-photo"><img data-url="img/3.jpg" alt="a.gif" /></div>
  <div class="my-photo"><img data-url="img/4.jpg" alt="a.gif" /></div>
  <div class="my-photo"><img data-url="img/1.jpg" alt="a.gif" /></div>
  <div class="my-photo"><img data-url="img/2.jpg" alt="a.gif" /></div>
  <div class="my-photo"><img data-url="img/3.jpg" alt="a.gif" /></div>
  <div class="my-photo"><img data-url="img/4.jpg" alt="a.gif" /></div>
  <div class="my-photo"><img data-url="img/1.jpg" alt="a.gif" /></div>
  <div class="my-photo"><img data-url="img/2.jpg" alt="a.gif" /></div>
  <div class="my-photo"><img data-url="img/3.jpg" alt="a.gif" /></div>
  <div class="my-photo"><img data-url="img/4.jpg" alt="a.gif" /></div>
  <div class="my-photo"><img data-url="img/1.jpg" alt="a.gif" /></div>
  <div class="my-photo"><img data-url="img/2.jpg" alt="a.gif" /></div>
  <div class="my-photo"><img data-url="img/3.jpg" alt="a.gif" /></div>
  <div class="my-photo"><img data-url="img/4.jpg" alt="a.gif" /></div>
  <div class="my-photo"><img data-url="img/1.jpg" alt="a.gif" /></div>
  <div class="my-photo"><img data-url="img/2.jpg" alt="a.gif" /></div>
  <div class="my-photo"><img data-url="img/3.jpg" alt="a.gif" /></div>
  <div class="my-photo"><img data-url="img/4.jpg" alt="a.gif" /></div>
  <div class="my-photo"><img data-url="img/1.jpg" alt="a.gif" /></div>
  <div class="my-photo"><img data-url="img/2.jpg" alt="a.gif" /></div>
  <div class="my-photo"><img data-url="img/3.jpg" alt="a.gif" /></div>
  <div class="my-photo"><img data-url="img/4.jpg" alt="a.gif" /></div>
  <div class="my-photo"><img data-url="img/1.jpg" alt="a.gif" /></div>
  <div class="my-photo"><img data-url="img/2.jpg" alt="a.gif" /></div>
  <div class="my-photo"><img data-url="img/3.jpg" alt="a.gif" /></div>
  <div class="my-photo"><img data-url="img/4.jpg" alt="a.gif" /></div>

js部分:

function ImgToWatch(){
    var imgs = document.querySelectorAll('.my-photo');
    var clientHeight= document.documentElement.clientHeight;//可视区域高度
    var scrollTop=document.documentElement.scrollTop;//鼠标滚动的距离    
    for (var i=0;i<imgs.length;i++) {
        if(imgs[i].offsetTop-scrollTop<clientHeight){//元素到页面顶部的距离offsetTop
            var img=imgs[i].getElementsByTagName("img")[0];
            //获取自定义属性
            var dataUrl=imgs[i].getElementsByTagName("img")[0].getAttribute('data-url');
            // 添加src元素，直接获取是没有东西的，因为我们没有给img添加src属性，所以获取不到
            img.setAttribute('src',dataUrl);
        }   
    }
}
// 页面加载的时候就要加载函数，不然打开页面是没有图片的
window.onload = function() {
    ImgToWatch();
};
window.onscroll = function() {
    ImgToWatch();
};
window.onresize = function() {//窗口调整时触发
    ImgToWatch();
};