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

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

按需加载数据即可。。

使用VueLazyload

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

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

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();

}

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

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

Ref

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

图片懒加载和Vue路由懒加载
图片懒加载什么是懒加载? 懒加载也叫做延迟加载或者按需加载 .在长网页中延迟加载暂时未看到的图片数据,能够优化网页性能,提高用户体验 .在较长的网页或应用中,如果图片很多,等待全部图片都被加载出来需 ...
Vue 图片懒加载之 Vue-Lazyload
一.什么叫懒加载通俗讲 : 懒加载就是延时加载,即当需要用到的时候再去加载. 那什么叫做需要用到的时候? 比如一个图片在没有出现在可视区域内,就已经加载当页面里了, 但只有滚动页面下方式才能看见, ...
android的aod的功能,一加正式推出氢OS 11：基于安卓11打造新增「年轮AOD」功能
原标题:一加正式推出氢OS 11:基于安卓11打造新增「年轮AOD」功能飞象网讯(高靖宇/文)8月10日下午消息,一加手机今天下午举行线上氢听会,正式发布氢 OS 11系统,基于Android 1 ...
按需加载图片（图片懒加载）
前言按需要加载图片,这是一个非常实用的功能,不仅可以提高网站的性能,还可以为你节省流量.对于用虚拟主机的朋友来说,如果你的网站是一个图片网站或者图片比较多的网站,那么图片懒加载功能真不能少. 原理 ...
滴滴快车奖励政策，高峰奖励，翻倍奖励，按成交率，指派单数分级（11月9日~11月13日)...
工作日奖励政策: 活动时间:2015年11月9日~2015年11月13日更新日期:2015年11月9日滴滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber ...
若有恒,何必三更眠五更起；最无益,莫过一日曝十日寒
若有恒,何必三更眠五更起:最无益,莫过一日曝十日寒. --这是明代学者胡居仁自勉联,凸现出先贤刻苦攻读.持之以恒,并注重科学学习方法的治学经验. 颜真卿的是"三更灯火五更鸡,正是男儿读书时. ...
鸿蒙之九大分身,正文第两千五百四十一章原来这就是鸿蒙之力（五更求花花）...
正文第两千五百四十一章原来这就是鸿蒙之力(五更求花花) 作者:梦岂更新时间:2019-02-25 19:27字数:7416字巅峰强少有声小说,阅读悦在线收听! "你..." ...
李翰卿治疗小儿五更咳嗽经验
小儿五更咳嗽是一种常见证候,处理不当常反复难愈,笔者学习我省已故名老中医李翰卿经验,应用通里攻下法治疗,效果显著,现介绍如下. 1.大承气汤加味:大黄.芒硝.枳实.厚朴.槟榔.炒莱菔子.陈皮. ...
弘辽科技：如何制作高转化的淘宝宝贝详情页？只需三招！
原标题<弘辽科技:如何制作高转化的淘宝宝贝详情页?只需三招!> 商品详情页是影响店铺转化的重要的因素之一,很多商家都觉得宝贝详情页很难制作,其实制作宝贝详情页还是很简单的,首先我们就要找准 ...
Kali Linux 安全渗透教程第五更1.4 安装Kali Linux
Kali Linux 安全渗透教程<第五更>1.4 安装Kali Linux Kali Linux 安全渗透教程<第五更>1.4 安装Kali Linux Kali Linux ...

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

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

最新文章

热门文章