Un composant de chargement paresseux basé sur jquery

Cette fois, je vous propose un composant de chargement paresseux basé sur jquery. Quelles sont les précautions pour le chargement paresseux de composants basés sur jquery. Voici un cas pratique, jetons un coup d'oeil.

<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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Problèmes avec VUE-CLI @2.9.1 et versions ultérieures

Explication détaillée de commonJS

Conseils pour utiliser jq pour envoyer plusieurs ajax puis exécuter des rappels

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!