扫码关注官方订阅号
在网上找了一些图片懒加载的js但是都是等到图片进入视口后才开始加载,体验不怎么友好,怎么做到让图片距离视口一段距离就开始加载
光阴似箭催人老,日月如移越少年。
自己写一个。或这看懂了别人的js组件来修改。大多都是监听滚动或者touchemove,然后检测元素距视口下端的距离。找到判断位置,把距离的判断条件改一下就好了,距离>你设置的值,就执行原有的操作。
计算一下img节点距离顶部的距离和监听滚动条的位置,一般的都是滚动条距离顶部距离等于img节点距离顶部的距离,触发懒加载,当滚动条距离顶部距离小于于img节点距离顶部的距离,比如100px(具体看你的需求),触发懒加载,就是你要的效果,只是提供一个思路,希望对你有帮助。
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
自己写一个。
或这看懂了别人的js组件来修改。
大多都是监听滚动或者touchemove,然后检测元素距视口下端的距离。
找到判断位置,把距离的判断条件改一下就好了,距离>你设置的值,就执行原有的操作。
计算一下img节点距离顶部的距离和监听滚动条的位置,一般的都是滚动条距离顶部距离等于img节点距离顶部的距离,触发懒加载,当滚动条距离顶部距离小于于img节点距离顶部的距离,比如100px(具体看你的需求),触发懒加载,就是你要的效果,只是提供一个思路,希望对你有帮助。