懒加载+瀑布流

懒加载+瀑布流

1.懒加载

懒加载就是延迟加载，当图片出现在页面中再加载图片，防止页面一次性加载图片，影响浏览器的性能，请求时间过长。

1.在img.onload预加载图片。
2.为页面中的图片设置好大小，防止引起页面的回流，影响性能。
3.判断元素是否进入用户视野中。（利用元素的offsetTop属性和scrollTop、clientTop之间的关系判断），若进入视野，则将data-originnal属性的值赋给图片的src属性。
4.滚动，重复判断元素是否进入视野。

for (let i = 0; i < total; i++) {
    promiseAll[i] = new Promise(resolve => {
        imgs[i] = new Image();
        imgs[i].src = images[i].img_url;
        imgs[i].onload = () => {
            let imgData = {};
            // 设置图片宽高占位
            imgData.height = (imgs[i].height * this.colWidth) / imgs[i].width;
            imgData.width = this.colWidth;
            imgData.src = images[i].img_url;
            this.waterfallList.push(imgData);
            this.rankImgs(imgData);
            resolve(imgs[i]);
        };
    });
}
Promise.all(promiseAll).then(() => {
    this.loading = false;
    this.loadMore(); //加载更多
});

瀑布流

页面刚开始最小高度都为0，colHeights=0，需要根据页面计算每个图片的偏移，找出最小高度，根据img.onload预加载图片，可获取图片的宽高，然后查询最小的高度，给下一个视图添加偏移量（top，left）。

// 计算图片偏移
rankImgs(imgData) {
    let min = this.filterMin();
    imgData.top = min.minHeight;
    imgData.left = min.minIndex * (this.colWidth + this.marginRight);

    this.colHeights[min.minIndex] += imgData.height + this.marginBottom + 80;
},

// 找出最小高度
filterMin() {
    let minHeight = Math.min.apply(null, this.colHeights);
    return {
        minHeight: minHeight,
        minIndex: this.colHeights.indexOf(minHeight)
    };
}

img图片initiator加载机制

img加载有几点：

1、200和304跟缓存的联系
2、请求发起者initiator
3、size（from memory cache和from disk cache）

200 - 直接请求服务器
304 - 使用缓存，先请求服务器，然后服务器告知资源没有变化，浏览器在使用本地缓存
200（from cache）- 不通过服务器，直接使用了浏览器缓存（脚本、图片、字体等）
200（from disk cache）- 在磁盘中（非脚本会存于内存中，如css）

注：200（from cache）和304有点像，具体返回哪个得看服务器的返回

fiewfox 没有from memory cache和from disk cache，只会有304状态，会缓存资源，每次都会请求服务器缓存是否更改，而Chrome则不会，直接使用缓存里面的数据。