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

问题描述

问 题

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

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

这个问题已被关闭，原因：问题质量差 - 问题太水、伸手党

解决方案

这个是一个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 的动画

这篇关于javascript - 关于电商网站的的加载处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！