Android页面预加载手机预加载

转载

charlesc 2024-04-09 13:48:42

文章标签 Android页面预加载 js 预加载加载懒加载 文章分类 Android 移动开发

1.前言

PC端网速较快，现在普通都是百兆宽带，那么折算一下就是10M/s的下载速度，基本上资源如果在10M以内的话加载还是比较快的。

但是移动端就不行了。移动端需要消耗巨额的流量，所以尽量减少移动端流量消耗成为了移动端Web页面的一个重要需求。

一般前端页面的加载方式就分为两种：懒加载和预加载，懒加载也叫lazyload，两者容易混淆，

2.预加载

2.1预加载运用场景

在制作图片墙，相册这样的单页图片资源比较大的页面时，为了能让用户有流畅的使用体验，需要提前将图片缓存到本地，这就是图片预加载的用途。

2.2预加载的使用

优先加载图片，加载图片时显示loading图或者动画，然后再显示页面，这样用户就无需等待页面的空白而残忍地关闭页面了

var imgs = []

function imgPreload(url, len, cb) {
    var img = new Image(), flag = 0
    img.onload = function () {
        flag++
        if (flag === len) {
            cb();
        }
    };
    img.onerror = function () {

    };
    img.src = url;
}

for (var i = 0, len = imgs.length; i < len; i++) {
    imgPreload(
        imgs[i], len,
        function () {
            // 显示页面
        }
    )
}

2.3预加载的缺陷

预加载一般是由于本身资源文件巨大，所以提前加载，这样的话加载时间也是比较长的。如果页面上图片很多，但是可以做按需加载那么就尽量不要使用预加载了。

注意：预加载只是把图片加载提前，并没有改变页面加载图片的数量。