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