技術標籤：前端前端

舉個例子

//ul樣式
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);//1fr 平分空間
    grid-template-rows: repeat(4, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    margin-bottom: 20px;
//img 樣式
.item-content>ul>li img {
    width: 100%;
    height: 100%;
 }
 //上面ul樣式為li分配了空間 li又為img分配了空間
 //img標籤
 <img data-original="http://www.luckymalltoday.com/${data[i].pimg}" src="./image/loading.svg" alt="">
 //js
 start();
var clock; //函式節流
$(window).on('scroll', function () {
    if (clock) {
        clearTimeout(clock);
    }
    clock = setTimeout(function () {
        start()
    }, 200)
})

function start() {
    $('img').not('[data-isLoading]').each(function () {
        if (isShow($(this))) {
            loadImg($(this));
        }
    })
}
function isShow($node) {
    return $node.offset().top <= $(window).height() + $(window).scrollTop();
}
function loadImg($img) {
    $img.attr('src', $img.attr('data-original'));
    $img.attr('data-isLoading', 1);
}