开发者社区> 技术小胖子> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

图片预加载与懒加载

简介:
+关注继续查看

一、预加载

前面做了个招聘页面,里面有大量的图片需要加载。

一开始都是全部写在页面中,在测试环境还看不出很慢,一放到正式环境就不对了。

微信浏览器本来就觉得慢,现在一下子要加载这么多图片,一下子就把屏幕弄白了,过了几十秒后才会完整的出现Loading图片。

这显然是无法忍受的,马上就加了预加载的功能,我只是简单的使用了一下。

预加载就是通过Image对象,给这个对象添加“src”属性,并可以将此对象缓存起来,以后再使用。

<img src="blank.png" data-src="img/p2/1.png" class="img1">

我先给img赋个空白图,然后通过JS来给src赋data-src中的值,预加载的逻辑从网上找到了相关代码。

function loadImage(url, callback) {
    var img = new Image();
    img.src = url;
    if (img.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数 防止IE6不执行onload BUG
        callback.call(img);
        return;
    }
    img.onload = function () {
        callback.call(img);//将回调函数的this替换为Image对象
    };
};

GTmetrix网上做了下性能测试,这个网站会提出改进的建议,并会说明这个改进的具体说明。

还配备了YSlow和PageSpeed性能工具。

在Waterfall中有资源加载记录,加了data-src属性的图片会在JS脚本之后再载入,这样的话就不会影响Loading效果显示了。

 

二、懒加载

一般懒加载就是当你做滚动到页面某个位置,然后再显示当前位置的图片,这样做可以减少页面请求。

参考了两个比较火的开源库,jquery_lazyloadlayzr.js,两者的人气都很足,不过前者是需要引入jQuery库的,后者不需要。

当页面过长的时候就会出现滚动条,而当年滚动到下面的时候,上面的页面就会看不到,下图中绿色部分就是那隐藏的页面。

通过计算,可以获取图片的两个距离值,图中标注了,然后判断是否在当前可视区域的顶部和底部的范围内,如果是就加载图,不是就不加载。

假设滚动条是在body中,那么当前可视区域的范围是:

viewTop = window.scrollY || window.pageYOffset;
viewBottom = window.innerHeight + viewTop;

而图片的top和height是:

nodeTop = node.getBoundingClientRect().top + viewTop;
nodeBottom = nodeTop + node.offsetHeight;

在上面出现了几个尺寸的概念。

Window.scrollY 与 Window.pageYOffset意思差不多,指的是滚动条顶部到网页顶部的距离。

Window.innerHeight 表示该容器中页面视图区的高度(减去边框宽度)。

Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。

HTMLElement.offsetHeight = height+padding+border。

更多的尺寸属性可以参考《JavaScript中尺寸、坐标

最后在给某个容器绑定“scroll”事件,上面的话是给“window”绑定。

 

参考资料:

Javascript图片预加载详解



    本文转自 咖啡机(K.F.J)   博客园博客,原文链接:http://www.cnblogs.com/strick/p/5372694.html,如需转载请自行联系原作者



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
原生JS实现最简单的图片懒加载
原生JS实现最简单的图片懒加载
45 0
图片加载框架之图片加载框架选型(一)上篇
阿里P7移动互联网架构师进阶视频(每日更新中)免费学习请点击:https://space.bilibili.com/474380680本篇文章将通过Universal-Image-Loader解析来阐述图片加载框架选型: 一、[Universal-Image-Loader解析基本介绍与使用] 基本...
889 0
[译] 原生实现图片懒加载
在本文中,我们将研究新的 loading 属性,它为 及 带来了延迟加载的能力。
928 0
图片预加载和懒加载的实现方法
图片预加载,即图片提前加载,可以保证图片快速、无缝的发布,用户需要查看时可直接从本地缓存中渲染,适用于图片占据很大比例的网站。 一、懒加载 将图片src赋值为一张默认的图片,当用户滚动到可视区域的时候,再去加载真正的图片; 代码实现: html代码 js代码 vue中实现懒加载 对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载。
1773 0
懒加载和预加载
懒加载也叫延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式。用户滚动到它们之前,可视区域外的图像不会加载。这与图像预加载相反,在长网页上使用延迟加载将使网页加载更快。在某些情况下,它还可以帮助减少服务器负载。常适用图片很多,页面很长的电商网站场景中。
2204 0
图片
●图片加载,缓存,处理 Picasso (一个强大的图片下载与缓存的库) Fresco (一个用于管理图像和他们使用的内存的库) Glide (一个图片加载和缓存的库,使用的App有:网易新闻) Picasso-transformations (...
1178 0
图片秘钥
新型图片加密文件及其网络入口验证等,新型方案。
1320 0
图片加载内存溢出
注意点1:取图片函数的流控制 注意点2:所有图片的缓存加载机制(反复初始化情况应对)
467 0
21114
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载