这次给大家带来基于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>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
相关阅读：
vue-cli @2.9.1以后版本的问题
commonjs详解
用jq发送多个ajax然后执行回调的小技巧
以上就是基于jquery的一个懒加载组件的详细内容。