• jq--图片懒加载


    html

    1.给图片不给真真意义上的src属性路径,可通过我们自己想要添加时改变它的属性路径即可。
    2.要获取浏览器中三种高度。

    $(window).height();//屏幕高度
    $(window).scrollTop();//滚动条距离顶部的高度
    obj.offset().top;//元素距离顶部的高度
    

    3.计算方法:img距离顶部的距离小于屏幕的高度加滚动条距顶部高度时加载图片,给图片设置真真的src属性的路径。

                <i class="displayB tea_proDetailPic"><img class="mI_img1" src="img/tea/tea_proDetail1.png" alt=""></i>
                <i class="displayB tea_proDetailPic"><img class="mI_img1" src="img/tea/tea_proDetail2.png" alt=""></i>
                <i class="displayB tea_proDetailPic tea_picTop"><img class="mI_img1" src="img/tea/tea_proDetail3.png" alt=""></i>
                <i class="displayB tea_proDetailPic tea_changePic"><img class="mI_img1" src="img/tea/tea_proDetail4.png" alt=""></i>
                <i class="displayB tea_proDetailPic tea_changePic"><img class="mI_img1" src="img/tea/tea_proDetail5.png" alt=""></i>
                <i class="displayB tea_proDetailPic tea_changePic"><img class="mI_img1" src="img/tea/tea_proDetail6.png" alt=""></i>
                <i class="displayB tea_proDetailPic tea_changePic"><img class="mI_img1" _src="img/tea/tea_proDetail7.png" alt=""></i>
                <i class="displayB tea_proDetailPic tea_changePic"><img class="mI_img1" _src="img/tea/tea_proDetail8.png" alt=""></i>
                <i class="displayB tea_proDetailPic tea_changePic"><img class="mI_img1" _src="img/tea/tea_proDetail9.png" alt=""></i>
                <i class="displayB tea_proDetailPic tea_changePic"><img class="mI_img1" _src="img/tea/tea_proDetail10.png" alt=""></i>
                <i class="displayB tea_proDetailPic"><img class="mI_img1" _src="img/tea/tea_proDetail11.png" alt=""></i>
                <i class="displayB tea_proDetailPic"><img class="mI_img1" _src="img/tea/tea_proDetail12.png" alt=""></i>
                <i class="displayB tea_proDetailPic"><img class="mI_img1" _src="img/tea/tea_proDetail13.png" alt=""></i>
                <i class="displayB tea_proDetailPic"><img class="mI_img1" _src="img/tea/tea_proDetail14.png" alt=""></i>
                <i class="displayB tea_proDetailPic"><img class="mI_img1" _src="img/tea/tea_proDetail15.png" alt=""></i>
                    
    

    jq

    
        ~(function() {
            var teaPic = $(".mI_img1");
            var wH = $(window).height();//屏幕高度
            teaPic.each(function(index,elem) {
                $(window).scroll(function() { 
                    var sTH = $(window).scrollTop();//滚动条距离顶部的距离
                    if( $(".tea_proNav").offset().top < (wH + sTH)- 260 && $(elem).attr("_src") ) {
    				    $(elem).attr('src',$(elem).attr('_src'));
    			    }
                });
            });
        })();
    
    
  • 相关阅读:
    BZOJ 4199: [Noi2015]品酒大会 后缀自动机+逆序更新
    BZOJ 3676: [Apio2014]回文串 回文自动机
    Remember the Word UVALive
    [APIO2012]派遣 可并堆(左偏树)
    BZOJ 2555: SubString 后缀自动机 + LCT
    力扣题目汇总(转换成小写字母,唯一摩尔斯密码,有序数组平方)
    力扣题目汇总(加一,旋转数组,整数反转)
    力扣题目汇总(存在重复,合并两个有序数组,搜索插入位置)
    力扣题目汇总(买卖股票的最佳时机,最大连续1的个数,缺失的数字)
    力扣题目汇总(最长特殊序列,回文数,移动零)
  • 原文地址:https://www.cnblogs.com/intelwisd/p/8079052.html
Copyright © 2020-2023  润新知