zoukankan      html  css  js  c++  java
  • ② 图片懒加载

    实现思路

    1. 首先先自定义属性如:data-imgurl,存放着图片的路径

    2. 然后通过js判断界面滚动的位置/图片是否已加载,未加载再去获取属性data-imgurl的值赋给src,实现图片的加载。

    具体做法如下:

    $('img').each(function () {
        //在未触发滚动事件时先判断图片是否已经出现在视窗中,打开页面时先遍历一次
        if (checkShow($(this)) && !isLoaded($(this)) ){ loadImg($(this));//加载当前img  } })
        $(window).on('scroll',function () {//滚动的触发事件
            $('img').each(function () {//遍历img标签
                if (checkShow($(this)) && !isLoaded($(this)) ){
                    loadImg($(this));//加载当前img
                }
            })
        })
    function checkShow($img) {};// 定义checkShow函数判断当前img是否已经出现在了视野中,传入img对象
    function isLoaded ($img) {};//定义isLoaded函数判断当前img是否已经被加载过了
    function loadImg ($img) {};//定义loadImg函数加载图片
    

    1. 判断目标标签是否出现在视野中

    function checkShow($img) { // 传入img对象
        var sTop = $(window).scrollTop();  //即页面向上滚动的距离
        var wHeight = $(window).height(); // 浏览器自身的高度
        var offsetTop = $img.offset().top;  //目标标签img相对于document顶部的位置
    
        if (offsetTop < (scrollTop + windowHeight) && offsetTop > scrollTop) { //在2个临界状态之间的就为出现在视野中的
            return true;
        }
        return false;
    }
    

    2. 判断目标标签是否已经被加载过

    function isLoaded ($img) {
        return $img.attr('data-imgurl') === $img.attr('src'); //如果data-imgurl和src相等那么就是已经加载过了
    }
    

    3. 加载目标标签

    function loadImg ($img) {
        $img.attr('src',$img.attr('data-imgurl')); // 把自定义属性中存放的真实的src地址赋给src属性
    }
    
  • 相关阅读:
    批量清理java源码的target目录
    前端移动node_modules到其他位置
    oracle物化视图和视图的数据不一致
    百词斩英语单词素材提取、听力练习
    2048自动游戏AI, 最高可以玩出一二十个2048
    switcheroo: Alt+Tab的替代工具、窗口搜索
    为知笔记wiz.editor.md增强
    腾讯北极星 Polaris 试用
    [分布式] 分布式事务、seata
    Mysql查询所有的表名和查询表中所有的字段名
  • 原文地址:https://www.cnblogs.com/pleaseAnswer/p/12124325.html
Copyright © 2011-2022 走看看