Atitit pagging翻页与按需加载图像 vue lazyload懒加载目录1.1. 翻最好就是不翻页直接加载一千数据咯 11.2. 使用VueLazyload 11.3. 五.更加方

Atitit pagging翻页与按需加载图像 vue lazyload懒加载

目录

1.1. 翻最好就是不翻页直接加载一千数据咯 1

1.2. 使用VueLazyload 1

1.3. 五.更加方便快捷的实现方式 2

1.4. 结束语:到这里,我们的小demo也就基本完成了,虽然还有其他方法,在这里我也就不一一阐述了,有兴趣的可以自行网上学习了解。需要本项目源代码的同学可以移步GitHub: 4

    1. 翻最好就是不翻页直接加载一千数据咯

按需加载数据即可。。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.3"></script>
<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>

    1. 使用VueLazyload

Vue.use(VueLazyload)
Vue.use(VueResource);   //这个一定要加上,指的是调用vue-resource.js
var example1 = new Vue({
    el: '#' + targetDivName,
    data: {items: [] },

<div class="videoBox-cover"  v-lazy:background-image="vo.vod_pic"
   >

    1. 五.更加方便快捷的实现方式

1.了解一个API

这种实现方式我们只需要了解一个API就行了:

getBoundingClientRect()//获取元素的大小及位置

MDN上的解释:

2.实现方式

通过上面的实验我们都知道,懒加载的一个重点就是要知道什么时候图片是进入了可视区内,那么就上面这张图而言,我们有什么方法判断图片进入了可视区呢。

其实很简单:

我们先获取图片到可视区顶部的距离,并获取到可视区的高度:

var bound = el.getBoundingClientRect();

var clientHeight = window.innerHeight;//这个和前面获取可视区高度的效果一样,只是兼容性问题

然后我们继续思考,当我们滚动条向下滚动的时候,bound.top值会变得越来越小,也就是图片到可视区顶部的距离也越来越小,所以当bound.top == clientHeight时,说明土片马上就要进入可视区了,只要我们在滚动,图片就会进入可视区,那么就需要请求资源了。也就是说,在bound.top<=clientHeight时,图片是在可视区域内的。

经过上面的思考,我们大致明白了如何实现,那么就来编写我们的代码了吧:

只需要把我们的js代码换成如下即可:

 var imgs = document.querySelectorAll('img');

        //用来判断bound.top<=clientHeight的函数,返回一个bool值

        function isIn(el) {

            var bound = el.getBoundingClientRect();

            var clientHeight = window.innerHeight;

            return bound.top <= clientHeight;

        }

        //检查图片是否在可视区内,如果不在,则加载

        function check() {

            Array.from(imgs).forEach(function(el){

                if(isIn(el)){

                    loadImg(el);

                }

            })

        }

        function loadImg(el) {

            if(!el.src){

                var source = el.dataset.src;

                el.src = source;

            }

        }

        window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发

            check();

        }

    1. 结束语:到这里,我们的小demo也就基本完成了,虽然还有其他方法,在这里我也就不一一阐述了,有兴趣的可以自行网上学习了解。需要本项目源代码的同学可以移步GitHub:

 总结:懒加载其实就两个重点,一个是元素到各个边距的距离,二个就是判断元素是否在可视区域内。

Ref

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2中,可以使用vue-lazyload插件来实现图片的懒加载。如果想要等待图片发起get请求返回数据解密后生成图片地址,然后手动触发图片的懒加载,你可以使用以下步骤: 1. 在模板中,添加一个图片的占位符,并设置其src属性为一个默认的占位图片,例如: ```html <img v-lazy="imageSrc" src="loading.gif"/> ``` 2. 在组件的`data`选项中,定义一个`images`数组,用于存储要显示的图片数据。例如: ```javascript export default { data () { return { images: [] } } } ``` 3. 在组件的`mounted`钩子中,发起get请求获取要显示的图片数据,并将其保存到`images`数组中。例如: ```javascript import axios from 'axios' export default { mounted () { axios.get('/api/images') .then(response => { this.images = response.data }) .catch(error => { console.log(error) }) } } ``` 4. 在模板中,使用`v-for`指令遍历`images`数组,动态生成图片元素,并将图片数据传递给一个法,用于解密生成图片地址。例如: ```html <template> <div> <img v-for="image in images" v-lazy="decryptImageSrc(image)" src="loading.gif"/> </div> </template> ``` 5. 在组件中,定义一个`decryptImageSrc`法,用于解密图片数据并生成图片地址。例如: ```javascript import CryptoJS from 'crypto-js' export default { methods: { decryptImageSrc (image) { const key = CryptoJS.enc.Utf8.parse('my-secret-key-12345') const iv = CryptoJS.enc.Utf8.parse('my-iv-12345') const encrypted = CryptoJS.enc.Base64.parse(image.src) const result = CryptoJS.AES.decrypt({ ciphertext: encrypted }, key, { iv: iv }) const src = CryptoJS.enc.Utf8.stringify(result) return src } } } ``` 6. 在组件中,使用`Vue.prototype.$Lazyload`法获取到vue-lazyload的实例。然后,在`images`数组更新后,手动触发图片的懒加载。例如: ```javascript import Vue from 'vue' import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload) export default { data () { return { images: [] } }, mounted () { axios.get('/api/images') .then(response => { this.images = response.data this.lazyload = Vue.prototype.$Lazyload({/* options */}) this.$nextTick(() => { this.loadImages() }) }) .catch(error => { console.log(error) }) }, methods: { loadImages () { const images = document.querySelectorAll('img[v-lazy]') images.forEach(image => { if (this.isVisible(image)) { this.lazyload.lazyLoad(image) } }) }, isVisible (element) { const rect = element.getBoundingClientRect() return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ) } } } ``` 7. 在组件中,可以在`window`对象的`scroll`事件和`resize`事件中调用`loadImages`法,以便在滚动和窗口大小变化时动态地触发图片的懒加载。例如: ```javascript mounted () { axios.get('/api/images') .then(response => { this.images = response.data this.lazyload = Vue.prototype.$Lazyload({/* options */}) this.$nextTick(() => { this.loadImages() }) }) .catch(error => { console.log(error) }) window.addEventListener('scroll', this.loadImages) window.addEventListener('resize', this.loadImages) }, beforeDestroy () { window.removeEventListener('scroll', this.loadImages) window.removeEventListener('resize', this.loadImages) } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值