关于电商网站的的加载处理_Node.js_论坛

关于电商网站的的加载处理

非***扰分类：Node.js 人气：1082 回帖：2 发布于6年前收藏

先贴上地址吧https://tuan.juanpi.com/pintu...

上拉的时候会有这样一个白色的渐变的效果遮罩，问题是我现在浏览器怎么找到这块的样式？有没有办法模拟这个手势然后锁定住页面我才好查看样式？
或者这块的js我怎么追踪？= =
小弟在此谢过

标签：node.js javascript php

讨论这个帖子（2）垃圾回帖将一律封号处理……

Lv4 码徒

风***2 站长 6年前#1

这个是图片懒加载效果，预加载

Lv4 码徒

小***学软件测试工程师 6年前#2

这个是一个css3 的动画效果
我找了一下是这段 css

.group-goods-list li .goods-img img {
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .3s linear;
    -webkit-transition: opacity .3s linear
}

.group-goods-list li .goods-img img.loaded {
    opacity: 1
}

触发的代码我找到了这个

$(window).scroll(function() {
    mebook.refreshTimer && (clearTimeout(mebook.refreshTimer),
    mebook.refreshTimer = null),
    mebook.refreshTimer = setTimeout(mebook.getInViewportList(), 300)
})
getInViewportList: function() {
    $(".lazy[_src]").each(function(o) {
        var e = $(this);
        mebook.inViewport(e) && mebook.loadImg(e)
    })
},

监听 scroll事件然后判断哪些图片是在视口中的将视口中的图片预加载,完成后,为img标签添加.loaded 的class
这样就触发了css3 的动画

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取