A lazy loading component based on jquery-JS Tutorial-php.cn

A lazy loading component based on jquery

php中世界最好的语言

Release： 2018-03-09 14:36:57

Original

1571 people have browsed it

This time I will bring you a lazy loading component based on jquery. What are the precautions for lazy loading components based on jquery. The following is a practical case, let's take a look.

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

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!