jQuery实现图片懒加载

最新推荐文章于 2023-08-05 14:21:04 发布

天天有嘎嘎吃

最新推荐文章于 2023-08-05 14:21:04 发布

阅读量414

点赞数 1

文章标签：前端 jquery javascript

本文链接：https://blog.youkuaiyun.com/m0_57308879/article/details/129136470

版权

直接上代码：

 <script src="js/jquery-2.1.1.js"></script>

<script>
// 滚动事件
start() //打开页面 调用一次 
$(window).on('scroll', function () {
    start() //滚动页面是 调用一次   方便管理 
})
//加载函数 
function start() {
    $('.img-lazy').not('[data-isLoaded]').each(function () {
        var $node = $(this)
        if (isShow($node)) {
            //缓冲效果 
            setTimeout(function () {
                loadIng($node)
            }, 500)
        }
    })
}
// 页面逻辑
function isShow($node) {
    // 当一个元素出现在我们眼前    小于 窗口高度 加上窗口滚动的高度的时候    就意味着  到达目标点 
    // 可以开始加载图片 或者其他内容
    return $node.offset().top <= $(window).height() + $(window).scrollTop()

}
// 显示状态
function loadIng($img) {
    // 获取目标元素 并替换 
    $img.attr('src', $img.attr('data-src'))
    //性能优化   进行判断   已经加载的  不会再进行加载  
    $img.attr('data-isLoaded', 1)
}
<script />