Suggest a feature
×

Welcome to TagMyCode

Please login or create account to add a snippet.
0
0
 
0
Language: Javascript
Posted by: Arvin iuunhao
Added: Jun 18, 2018 9:04 AM
Views: 7
Tags: js
canvas模糊
  1. <template>
  2.     <div class="lazy-load" ref="imgs">
  3.       <img class="img" v-for="(item, index) in list" :data-src="item.pic" src="" :key="index" alt=""/>
  4.     </div>
  5. </template>
  6.  
  7. <script>
  8. export default {
  9.   name: '',
  10.   data() {
  11.     return {
  12.       list: [
  13.         { pic: 'http://img.hb.aicdn.com/0e9c71359172d3654f74b0d9ccfd1cdf9da1e26e3f4d4-Cabl4Z_fw658' },
  14.         { pic: 'http://img.hb.aicdn.com/8e5782bfef856f909ab0247c893f2a57955f29164977d-ILmCmz_fw658' },
  15.         { pic: 'http://img.hb.aicdn.com/61a68483c74347def88ec415569bd08c49f6e90043f164-67scdL_fw658' },
  16.         { pic: 'http://img.hb.aicdn.com/3a95ee24bf102249d1757d4f97577f50be6cc0d39a2c-ZK2Ym9_fw658' },
  17.         { pic: 'http://img.hb.aicdn.com/dedaa22ac5ac5701d02bae12d57a65112a404edb13787-RQl6MZ_fw658' },
  18.         { pic: 'http://img.hb.aicdn.com/06fd49045a05f304dcbc062323ec04cbb49ba3eaa7292-qWXl9S_fw658' }
  19.       ]
  20.     };
  21.   },
  22.   components: {},
  23.   created() {},
  24.   mounted() {
  25.     this.$nextTick(() => {
  26.       this.lazyFun();
  27.       // window.addEventListener('touchstart', this.lazyFun);
  28.       // window.addEventListener('touchmove', this.lazyFun);
  29.       // window.addEventListener('touchend', this.lazyFun);
  30.     });
  31.  
  32.     var throttle = function(delay, interval, fn) {
  33.       var startTime = new Date().getTime();
  34.       var timer = null;
  35.       return function() {
  36.         var curTime = new Date().getTime();
  37.         clearTimeout(timer);
  38.         console.log(curTime - startTime, interval);
  39.         if (curTime - startTime >= interval) {
  40.           fn.apply(this, arguments);
  41.           startTime = curTime;
  42.         } else {
  43.           timer = setTimeout(fn, delay);
  44.         }
  45.       };
  46.     };
  47.     window.addEventListener('touchstart', this.lazyFun);
  48.     window.addEventListener('touchmove', throttle(100, 200, this.lazyFun));
  49.     window.addEventListener('touchend', this.lazyFun);
  50.   },
  51.   watch: {},
  52.   computed: {},
  53.   methods: {
  54.     lazyFun() {
  55.       const imgs = this.$refs.imgs.children;
  56.       for (let i = 0, len = imgs.length; i < len; i++) {
  57.         if (imgs[i].getBoundingClientRect().top < document.documentElement.clientHeight) {
  58.           let url = imgs[i].getAttribute('data-src');
  59.           imgs[i].src = url;
  60.         }
  61.       }
  62.     }
  63.   }
  64. };
  65.  
  66.  
  67.  
  68. </script>
  69.  
  70. <style scoped lang="less" type="text/less">
  71. .img {
  72.   display: block;
  73.   width: 100vw;
  74.   height: 100vh;
  75. }
  76. .lazy-load {
  77.   /*height: 120vh;*/
  78. }
  79. </style>
  80.