jquery를 기반으로 한 지연 로딩 구성 요소

이번에는 jquery 기반의 지연 로딩 컴포넌트를 가져오겠습니다. jquery 기반 지연 로딩 컴포넌트의 주의사항은 무엇인가요?

<style lang="scss" type="text/scss" scoped>
    #home {
        background: rgba(245, 245, 245, .8);
        width: 1000px;
        margin: 0 auto;
        min-height: 500px;
        padding: 30px;

        .wrap {
            position: relative;
            width: 100%;
            height: 299px;

            box-sizing: border-box;
            overflow: hidden;
            background: #ffffff;
            margin-bottom: 10px;
            img {
                display: block;
                width: 60%;
                height: 60%;
                cursor: pointer;
                margin: 20px auto;
            }
            &:hover {
                transform: translate3d(0, -2px, 0);
                box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
            }
            &:hover .child {
                /*animation:  moveup .2s  linear ;*/
                transition: all .2s linear;
                bottom: 0;
            }
            .child {
                position: absolute;
                bottom: -75px;
                left: 0;
                background: #ff6700;
                width: 100%;
                cursor: pointer;
                height: 75px;
                z-index: 1;
                p {
                    color: #ffffff;
                    line-height: 25px;
                    font-size: 14px;
                    text-align: center;
                    &:nth-child(1) {
                        font-size: 16px;
                        font-weight: 600;
                    }
                    &:nth-child(2) {

                    }
                }
            }
        }
    }</style><template>
    <div id="home" class=" ">
        <Row :gutter="10">
            <Col span="6" v-for="item in 100">
            <div
                class="wrap"
            >
                <img   alt="xiaomI" src="../../assets/imgs/dg.png" name="0">

                <div class="child">
                    <p>小米净水器（厨下式）</p>
                    <p>大流量直出纯净水，健康家庭必备</p>
                </div>


            </div>
            </Col>
        </Row>


    </div></template><script>
    import imgSrc from "./1.jpg";    export default {
        data () {            return {                msg: ""
            }
        },        computed: {},        props: [],        components: {},        methods: {            //加载当前视口
            loadingShiKou: function () {                let $imgs = $(".wrap img");                let seeHieight = $(window).height();                let scrollTop = $(window).scrollTop();

                $imgs.each(function (index, item) {                    let name =  $(item).attr("name") - 0; // 0 未加载 1 加载
                    if ( $(item).offset().top  < seeHieight + scrollTop) {                        if (name === 0) {
                            $(item).attr("name", 1);
                            setTimeout(function () {
                                $(item).attr("src", imgSrc);
                            },1000)
                        }
                    }
                })
            }

        },
        created () {

        },
        mounted () {            const huang = this;            this.loadingShiKou();
            $(document).scroll(function () {
                huang.loadingShiKou();

            })


        }

    }</script>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

VUE-CLI @2.9.1 이상 버전의 문제

commonJS 자세한 설명

jq를 사용하여 여러 ajax를 보낸 다음 콜백을 실행하는 팁

위 내용은 jquery를 기반으로 한 지연 로딩 구성 요소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!