原生JS图片懒加载
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md
lazyImage.js

README.md

lazyImage原生JS图片懒加载

实现想法:监听浏览器滚轴,延迟0.3秒视为停止滚动。把所有带有 lazyimg class的图片存入数组,根据显示窗口的距离(增加偏移量)来判断是否显示,符合条件即替换自定义属性的为图片的src。

引入js文件

<script src="js/lazyImage.js"></script>

html范例

<ul>
    <li>
        <img class="lazyimg" src="img/temp.jpg" data-lazysrc="img/01.jpg" >
    </li>
    <li>
        <img class="lazyimg" src="img/temp.jpg" data-lazysrc="img/02.jpg" >
    </li>
    <li>
        <img class="lazyimg" src="img/temp.jpg" data-lazysrc="img/03.jpg" >
    </li>
    <li>
        <img class="lazyimg" src="img/temp.jpg" data-lazysrc="img/04.jpg" >
    </li>
    <li>
        <img class="lazyimg" src="img/temp.jpg" data-lazysrc="img/05.jpg" >
    </li>
    <li>
        <img class="lazyimg" src="img/temp.jpg" data-lazysrc="img/06.jpg" >
    </li>
</ul>

初始化选项

lazyImage({       
    //class选择器的名称
    selector : 'lazyimg',
    //自定义属性的名称
    dataAtt : 'data-lazysrc',
    //滚轴延迟监听时间
    delayTime : 300,
    //判断距离显示窗口的偏移量
    offsetScroll : 100
});

因为技术有限,有待更好的优化,如有不足欢迎指点。