js 图片按需加载

样式定义

    * {padding: 0; margin: 0;} /* 重置页面默认样式 */
    body {}
    li {list-style: none;}
    #ul {margin: 300px auto 0; width: 360px;}
    li {float: left; margin: 10px; width: 100px; height: 100px; background: red;}
    img {display: inline-block; width: 300px; margin-left: 20px;}

HTML结构

<div>
  <img src="images/white.JPG" _src="images/1.jpg">
    <img src="images/white.JPG" _src="images/2.jpg">
    <img src="images/white.JPG" _src="images/3.jpg">
    <img src="images/white.JPG" _src="images/4.jpg">
    <img src="images/white.JPG" _src="images/5.jpg">
    <img src="images/white.JPG" _src="images/6.jpg">
    <img src="images/white.JPG" _src="images/1.jpg">
    <img src="images/white.JPG" _src="images/2.jpg">
    <img src="images/white.JPG" _src="images/3.jpg">
    <img src="images/white.JPG" _src="images/1.jpg">
    <img src="images/white.JPG" _src="images/2.jpg">
    <img src="images/white.JPG" _src="images/3.jpg">
    <img src="images/white.JPG" _src="images/4.jpg">
    <img src="images/white.JPG" _src="images/5.jpg">
    <img src="images/white.JPG" _src="images/6.jpg">
    <img src="images/white.JPG" _src="images/1.jpg">
    <img src="images/white.JPG" _src="images/2.jpg">
    <img src="images/white.JPG" _src="images/3.jpg">
    <img src="images/white.JPG" _src="images/1.jpg">
    <img src="images/white.JPG" _src="images/2.jpg">
    <img src="images/white.JPG" _src="images/3.jpg">
    <img src="images/white.JPG" _src="images/4.jpg">
    <img src="images/white.JPG" _src="images/5.jpg">
    <img src="images/white.JPG" _src="images/6.jpg">
    <img src="images/white.JPG" _src="images/1.jpg">
    <img src="images/white.JPG" _src="images/2.jpg">
    <img src="images/white.JPG" _src="images/3.jpg">
    <img src="images/white.JPG" _src="images/1.jpg">
    <img src="images/white.JPG" _src="images/2.jpg">
    <img src="images/white.JPG" _src="images/3.jpg">
    <img src="images/white.JPG" _src="images/4.jpg">
    <img src="images/white.JPG" _src="images/5.jpg">
    <img src="images/white.JPG" _src="images/6.jpg">
    <img src="images/white.JPG" _src="images/1.jpg">
    <img src="images/white.JPG" _src="images/2.jpg">
    <img src="images/white.JPG" _src="images/3.jpg">
    <img src="images/white.JPG" _src="images/1.jpg">
    <img src="images/white.JPG" _src="images/2.jpg">
    <img src="images/white.JPG" _src="images/3.jpg">
    <img src="images/white.JPG" _src="images/4.jpg">
    <img src="images/white.JPG" _src="images/5.jpg">
    <img src="images/white.JPG" _src="images/6.jpg">
    <img src="images/white.JPG" _src="images/1.jpg">
    <img src="images/white.JPG" _src="images/2.jpg">
    <img src="images/white.JPG" _src="images/3.jpg">
    <img src="images/white.JPG" _src="images/1.jpg">
    <img src="images/white.JPG" _src="images/2.jpg">
    <img src="images/white.JPG" _src="images/3.jpg">
    <img src="images/white.JPG" _src="images/4.jpg">
    <img src="images/white.JPG" _src="images/5.jpg">
    <img src="images/white.JPG" _src="images/6.jpg">
    <img src="images/white.JPG" _src="images/1.jpg">
    <img src="images/white.JPG" _src="images/2.jpg">
    <img src="images/white.JPG" _src="images/3.jpg">
    <img src="images/white.JPG" _src="images/1.jpg">
    <img src="images/white.JPG" _src="images/2.jpg">
    <img src="images/white.JPG" _src="images/3.jpg">
    <img src="images/white.JPG" _src="images/4.jpg">
    <img src="images/white.JPG" _src="images/5.jpg">
    <img src="images/white.JPG" _src="images/6.jpg">
    <img src="images/white.JPG" _src="images/1.jpg">
    <img src="images/white.JPG" _src="images/2.jpg">
    <img src="images/white.JPG" _src="images/3.jpg">
    <img src="images/white.JPG" _src="images/1.jpg">
    <img src="images/white.JPG" _src="images/2.jpg">
    <img src="images/white.JPG" _src="images/3.jpg">
    <img src="images/white.JPG" _src="images/4.jpg">
    <img src="images/white.JPG" _src="images/5.jpg">
    <img src="images/white.JPG" _src="images/6.jpg">
    <img src="images/white.JPG" _src="images/1.jpg">
    <img src="images/white.JPG" _src="images/2.jpg">
    <img src="images/white.JPG" _src="images/3.jpg">
    <img src="images/white.JPG" _src="images/1.jpg">
    <img src="images/white.JPG" _src="images/2.jpg">
    <img src="images/white.JPG" _src="images/3.jpg">
    <img src="images/white.JPG" _src="images/4.jpg">
    <img src="images/white.JPG" _src="images/5.jpg">
    <img src="images/white.JPG" _src="images/6.jpg">
    <img src="images/white.JPG" _src="images/1.jpg">
    <img src="images/white.JPG" _src="images/2.jpg">
    <img src="images/white.JPG" _src="images/3.jpg">
    <img src="images/white.JPG" _src="images/1.jpg">
    <img src="images/white.JPG" _src="images/2.jpg">
    <img src="images/white.JPG" _src="images/3.jpg">
    <img src="images/white.JPG" _src="images/4.jpg">
    <img src="images/white.JPG" _src="images/5.jpg">
    <img src="images/white.JPG" _src="images/6.jpg">
    <img src="images/white.JPG" _src="images/1.jpg">
    <img src="images/white.JPG" _src="images/2.jpg">
    <img src="images/white.JPG" _src="images/3.jpg">
</div>

JavaScript脚本

var div = document.getElementsByTagName('div')[0]; // 获取第一个div元素
var oImg = document.getElementsByTagName('img');    // 获取所有img元素

window.onscroll = function () { axjz(); }

axjz();
function axjz() { // 按需加载函数
    var scroll = document.documentElement.scrollTop || document.body.scrollTop; // 获取滚动条位置
    for (var i = 0; i < oImg.length; i++) {
        if (oImg[i].offsetTop < scroll + document.documentElement.clientHeight) {
            // 如果图片顶部已经进入可视区域
            oImg[i].src = oImg[i].getAttribute('_src'); // 加载实际图片
        }
    }
}