懒加载与瀑布流

懒加载原理

当打开一个有很多图片的页面时,先只加载页面上看到的图片,等滚动到页面下面时,再加载所需的图片。这就是图片懒加载。
设置图片src属性为同一张图片,同时自定义一个data-src属性来存储图片的真实地址
页面初始化显示的时候或者浏览器发生滚动的时候判断图片是否在视野中
当图片在视野中时,通过js自动改变该区域的图片的src属性为真实地址

瀑布流原理

先通过计算出一排能够容纳几列元素,然后寻找各列之中所有元素高度之和的最小者,并将新的元素添加到该列上,然后继续寻找所有列的各元素之和的最小者,继续添加至该列上,如此循环下去,直至所有元素均能够按要求排列为止;

判断元素出现在用户视野

当元素在页面中的位置小于浏览器高度或者元素容器高度和用户滚动的高度时,可以得到元素出现在用户视野

$('元素').offset().top <= $(window).height() + $(window).scrollTop()

判断浏览器滚动到最底部

和判断元素是否出现在用户视野中的做法是一样的;

页面的高度 $('body').height();

用户滚动的距离 $(window).scrollTop()

浏览器的高度 $(window).height()
当浏览器的高度 + 用户滚动的距离 = 页面的高度 我们可以判断浏览器滚动到最低部了

if($(window).height() + $(window).scrollTop() = $('body').height()) {
      console.log('到达浏览器底部')

简单实现懒加载

懒加载

简单实现瀑布流

瀑布流

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 懒加载 一、懒加载的实现原理 由于过多的图片会严重影响网页的加载速度,并且移动网络下的流量消耗巨大,所以说延迟加载...
    我不信这样也重名阅读 4,035评论 0 0
  • 1.如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible...
    飘飘流浪者阅读 5,195评论 0 2
  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 8,924评论 1 11
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 7,414评论 0 7
  • 我们的人生完全可以自己去掌控和把握。如何掌控和把握呢?答案很简单,就是努力和坚持。
    无可取代的光芒阅读 847评论 0 0

友情链接更多精彩内容