web前端图片延迟加载举例分析

本篇内容主要讲解“web前端图片延迟加载举例分析”，感兴趣的朋友不妨来看看。本文介绍的免费云主机、域名方法操作简单快捷，实用性强。下面就让小编来带大家学习“web前端图片延迟加载举例分析”吧!首先，定义图片为三列，一共有5行，具体代码如下：里面用到的bootstrap的 布局技术（当然，这不是重点），请看img标签中的src,一开始我们并没有给它具体的图片的资源路径，而是自己定义了一个属性 x-src，该属性的值是图片图片的资源路径，每一行的img都是如此，接下来，当页面载入的时候，我们使用jquery(当然，你想 javascript原生的代码也可以，我这里只是为了省时间而已)来循环遍历每一个img，判断每一个图片是否在当前可视区域内，是则显示图片，否则稍 后处理，这里需要知道三个数据：注：因为我所写的是当图片的一半进入的浏览器的可视区域内才将这张图片进行加载，所以需要 第三 个数据，这个看个人的需求是什么，如果你的需求是图片只要已进入可视区域内就加载，可直接忽略第三个数据!!!!1：浏览器可视区域的高度2：图片相对于文档的偏移量（这里只需要高度上的偏移量）3：图片元素本身的高度如果图片先对于文档的偏移量+图片元素本身的高度的一半
具体的效果如下：你可以在控制台看到，虽然我们有5行图片,每行有3列，但加载进来的图片只有***列（图片高度有超出一半的img才会加载图片的资源进来），其他的都没有加载进来，这就使得图片的刷新会很快出现效果，那么接下来，用户需要看到更多的图片，这个时候需要进行滚动条往下滚动，去刷新更多的图片，那么这个时候我们除了上述的3个数据之外，还需要知道当前滚动条滚动的距离，如果：图片先对于文档的偏移量+图片元素本身的高度的一半
具体效果如下：在控制台你可以看到，随着滚动条的滚动，加载进来的图片由原来的三张变成了现在的六张，滚动条不断的往下滚动，图片就会不断的加载进来，从而得到更好的用户体验。到此，相信大家对“web前端图片延迟加载举例分析”有了更深的了解，不妨来实际操作一番吧！这里是云技术网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

相关推荐: MySQL5.6有哪些新特性

这篇文章主要介绍“MySQL5.6有哪些新特性”，在日常操作中，相信很多人在MySQL5.6有哪些新特性问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”MySQL5.6有哪些新特性”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！…