這次帶給大家基於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中文網其它相關文章！
相關閱讀：
以上是基於jquery的一個懶加載組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
