图片都是一个loading的加载状态
举例:瞬间,互联网要获取20张网络图片的请求,稍等片刻之后,并不是一开始就展示所有的图片,滚动哪里就加载几张图片
作用: 缓解网络压力,使得用户体验更好
图片懒加载如何展现的呢,img指向一个图片,其它的img也只是加载加载这个图片,其它的图片片加载的时候,直接从缓存里面进行加载
在img标签中把data-src里面的值放到src这个属性上面
1.窗口的高度 2.滚动的距离 3.元素相当于顶点之间的距离
###滚动的高度的判断
$(window).height() = $(window).scrollTop + $(node).offset().top()可能是没有清除浮动
已经加载的图片可以添加isLoaded = true 这个属性,然后选择器判断的时候可以过滤一下有这个属性的元素
$().not('[data-isloaded]').each(function(){ })语言描述: 设置一个数组,每当放一个元素到数组中的一个元素的时候,该元素的高度更新,在下一次放入元素当中的时候,需要进行比较每一列的高度,选择高度最小的一个元素插入这个数组。
代码描述:
生成的测试图片
includeMargin(默认值:false) 类型:布尔值 一个布尔值,指示是否在计算中包含元素的边距。
如何实现一边下拉,一边展现
获取数据
把数据拼接成dom放到页面上
使用瀑布流去摆放dom 位置
获取10条数据
把10条数据拼接成dom放到页面上
使用瀑布流去摆放dom 位置
page++
当页面滚动(或者某个条件下)
获取page =2 的10条数据把10条数据拼接成dom放到页面上使用瀑布流去摆放dom 位置page++原理:先将img标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储在img标签的自定义属性中(比如data-src)。当js监听到该图片元素进入可视窗口时,即将自定义属性中的地址存储到src属性中,达到懒加载的效果。 这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢,页面卡顿或崩溃等问题。
瀑布流布局由pinterest.com网站首创,它的原理是:先通过计算出一排能够容纳几列元素,然后寻找各列之中所有元素高度之和的最小者,并将新的元素添加到该列上,然后继续寻找所有列的各元素之和的最小者,继续添加至该列上,如此循环下去,直至所有元素均能够按要求排列为止
木桶效应 假设我们手里有20张照片,这些照片可以在保持宽高比的情况下进行放大或者缩小。选定一个基准高度比如200px
拿第1张照片,锁定宽高比高度压缩到200px,放到第一行拿第2张照片,高度压缩到200px,放到第一行,图片1的后面…拿第5张照片,高度压缩到200px,放到第一行。oh,不好,空间不够,放不下了把前面水平依次排放好的4个图片当成一个整体,等比拉伸,整体宽度正好撑满容器第5张照片从下一行开始,继续… 以上,就是木桶布局的原理。窗口的高度 + 滚动的距离 ?= 元素相当于顶点之间的距离
$(window).height() = $(window).scrollTop + $(node).offset().top()任务1
任务二
如果无法显示图像,浏览器将显示替代文本,就像这样:
### 实现课程中的瀑布流布局
### this 当在其他函数上调用init()的函数或者参数的时候的时候,记得加上_this,否则将无法实现调用函数
ES6 新增了let命令,用来声明局部变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效,而且有暂时性死区的约束。