WAP 图片 lazyload

本文介绍了一种基于屏幕坐标和监听滚动事件的懒加载技术实现方案。通过设置扫描线路和获取元素,实现图片按需加载,有效提升网页加载速度。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

原理是根据屏幕上的坐标找到需要做 lazyload 的区域

1,先监听 scroll 事件

var threshold = 30
    ,scrolling_lt
window.addEventListener('scroll', function(){
    scrolling_lt = new Date
    window.setTimeout(function(){
        if (new Date - scrolling_lt < threshold) return
        console.log('scroll stop')
        getEleToLoad()


        }, threshold)
} , false)

 

 

2 设置扫描线路

var scaneArea = (function(){
    var area = []
        ,w = document.body.clientWidth
        ,h = document.body.clientHeight
        ,column = 20
        ,space = [Math.round(w / column) , Math.round(h / column)]
    for (var i = 1 ; i < column * .4; i ++) {
        area.push([space[0] * i , space[1] * i ])
        area.push([space[0] * i , h - space[1] * i ])
        area.push([w - space[0] * i , space[1] * i ])
        area.push([w - space[0] * i , h - space[1] * i ])
        }

    return area
    })()

 

3 获取元素,并显示

function toLoad(imgs){
    function loadIt(){
        var img = imgs.shift()
        if (!img) return
        var src = img.getAttribute('asrc')
        if (src){
            img.removeAttribute('asrc')
            img.innerHTML = '<img src='+src+' />'
            }
        window.setTimeout(loadIt , 200)
        }
    loadIt()
    }
function getEleToLoad(){
    var imgs = []
        ,d
        ,findOne = false
    scaneArea.forEach(function(pos){
        var ele = document.elementFromPoint(pos[0] , pos[1])
        if (!ele || d === ele || ele.dataset.scaned) return
        ele.dataset.scaned = 1
        d = ele
        if (ele.className.indexOf('lazy') > -1 ) {
            if (findOne)
                return imgs.push(ele)
            else {
                toLoad([ele])
                findOne = true
                }
            }
        })
    toLoad(imgs)
    }
window.setTimeout(getEleToLoad , 20)

 

 

 

转载于:https://www.cnblogs.com/vaal-water/p/3796315.html

内容概要:本文档详细介绍了基于MATLAB实现的无人机三维路径规划项目,核心算法采用蒙特卡罗树搜索(MCTS)。项目旨在解决无人机在复杂三维环境中自主路径规划的问题,通过MCTS的随机模拟与渐进式搜索机制,实现高效、智能化的路径规划。项目不仅考虑静态环境建模,还集成了障碍物检测与避障机制,确保无人机飞行的安全性和效率。文档涵盖了从环境准备、数据处理、算法设计与实现、模型训练与预测、性能评估到GUI界面设计的完整流程,并提供了详细的代码示例。此外,项目采用模块化设计,支持多无人机协同路径规划、动态环境实时路径重规划等未来改进方向。 适合人群:具备一定编程基础,特别是熟悉MATLAB和无人机技术的研发人员;从事无人机路径规划、智能导航系统开发的工程师;对MCTS算法感兴趣的算法研究人员。 使用场景及目标:①理解MCTS算法在三维路径规划中的应用;②掌握基于MATLAB的无人机路径规划项目开发全流程;③学习如何通过MCTS算法优化无人机在复杂环境中的飞行路径,提高飞行安全性和效率;④为后续多无人机协同规划、动态环境实时调整等高级应用打下基础。 其他说明:项目不仅提供了详细的理论解释和技术实现,还特别关注了实际应用中的挑战和解决方案。例如,通过多阶段优化与迭代增强机制提升路径质量,结合环境建模与障碍物感知保障路径安全,利用GPU加速推理提升计算效率等。此外,项目还强调了代码模块化与调试便利性,便于后续功能扩展和性能优化。项目未来改进方向包括引入深度强化学习辅助路径规划、扩展至多无人机协同路径规划、增强动态环境实时路径重规划能力等,展示了广阔的应用前景和发展潜力。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值