懒加载和瀑布流

1.懒加载

原理

先将页面中的img元素的路径(src)设置为同一张图片的路径,当访问这个页面时,一开始只需要加载一次图片(因为都是同一张图片),当页面中的img元素出现在可视区域时,通过js来修改图片的路径,来显示真正需要显示的图片。

作用

使用图片懒加载,可以防止一次性向服务器发送大量请求,减轻服务器的压力,提高用户的浏览体验;

例子

2.瀑布流

原理

先计算容器的一行能排多少列元素(容器的宽度除以一个元素的宽度),然后从所有列中,找到列的高度(添加了元素后高度要增加)最小的那一列,将一个元素添加到这一列中,然后不断重复这一操作,直到所有元素排列完成;

例子

3.判断元素出现在用户视野、判断浏览器滚动到最底部

例子

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容