图片懒加载实现

KuaiKan 2022-6-5 603

暂存

先看看效果,下一步在替换所有图片标签

图片懒加载

<script>
function throttle(fn, delay, atleast) {
    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') === 'plugin/kan_lanjiazai/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);
</script>
<img src="images/loading.gif" data-src="images/1.png">

http://amazeui.github.io/echo/

echo.js

function add_lazy_load_filter($html) {
    return preg_replace("/<img\s+src=\"([^\"]+)\"\s*\ ?="">/is", "<img data-src="\"\\1\"">", $html);
}</img\s+src=\"([^\"]+)\"\s*\>


签名:这个人很懒,什么也没有留下!
最新回复 (0)
返回