我的编程空间,编程开发者的网络收藏夹
学习永远不晚

如何利用图片预加载组件提升html5移动页面的用户体验

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

如何利用图片预加载组件提升html5移动页面的用户体验

今天就跟大家聊聊有关如何利用图片预加载组件提升html5移动页面的用户体验 ,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

在做h6移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验。抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http请求合并,缓存管理,图片压缩等方面做性能优化;另外就是可以对页面里用到的所有图片做预加载的处理,当用户打开页面的时候不立即显示第一屏,而是先显示资源加载效果,等到加载完毕,再来显示页面的主内容,这样就能解决那个问题。虽然这种加载效果占用了用户的浏览时间,但是我们可以把它做的好看有趣一点,所以也不会影响用户体验。
效果:

如何利用图片预加载组件提升html5移动页面的用户体验

1. 实现思路

html里面的img标签和css中background-imag等都会触发浏览器去加载相关的图片,但是如果这个图片已经加载过了的话,浏览器就会直接使用这张已经加载好的图片,从而能够瞬间在页面中渲染出来。通过javascript,创建Image对象,然后把这些对象的class="lazy" data-src属性设置成要加载的图片地址也能触发浏览器加载图片,利用这一点就能实现图片预加载的功能:在页面里首先把那些用到了相关的图片的元素给藏掉,然后用js去加载图片,等到所有图片加载完毕再把藏掉的元素显示即可。不过这仅仅是一个基本的实现思路,要完成一个功能较健壮的预加载组件,还有以下三个问题:
1)进度问题
由于预加载的同时,还得做一个预加载的效果,这就需要把加载的进度实时通知到外部上下文才行。关于进度有两个实现方式,第一是已加载的数据大小/总的数据大小,第二是已加载的文件数/总的文件数,在浏览器里面,采用第一种方式是不现实的,根本没有原生的办法可以做到,所以只能采用第二种。
2)图片加载失败的问题
比如说有4张图片,已经加载了50%,在加载第三张的时候出错了,该不该将进度反馈成75%呢?答案是:应该。如果不这么处理的话,进度永远无法到100%,页面主内容就没机会显示了,虽然图片加载有失败的情况,但是跟加载器没有关系,也许图片本身就不存在呢?也就是说图片加载失败不应该影响加载器的功能。
3)图片加载超时的问题
图片不能加载太久,否则用户一直停留在加载效果上看不到主内容,用户的等待时间不可控制地延长,导致用户体验下降,这样就有悖加载器的初衷了。所以应该给每个图片设置一个加载的超时时间,如果在所有图片的超时时间之后,还没加载完,就应该主动放弃加载,通知外部上下文加载完毕,显示主内容。
综合以上这些需求,本文提供的实现是:

JavaScript Code复制内容到剪贴板

  1. (function () {    
    function isArray(obj) {    
    return Object.prototype.toString.call(obj) === '[object Array]';    
    }    
        
    var loader = function (imgList, callback, timeout) {    
    timeout = timeout || 5000;    
    imgList = isArray(imgList) && imgList || [];    
    callback = typeof(callback) === 'function' && callback;    
    var total = imgList.length,    
    loaded = 0,    
    imgages = [],    
    _on = function () {    
    loaded < total && (++loaded, callback && callback(loaded / total));    
    };    
    if (!total) {    
    return callback && callback(1);    
    }    
    for (var i = 0; i < total; i++) {    
    imgages[i] = new Image();    
    imgages[i].onload = imgages[i].onerror = _on;    
    imgages[i].class="lazy" data-src = imgList[i];    
    }    
        
    setTimeout(function () {    
    loaded < total && (loaded = total, callback && callback(loaded / total));    
    }, timeout * total);    
    };    
    "function" === typeof define && define.cmd ? define(function () {    
    return loader    
    }) : window.imgLoader = loader;    
    })();

使用方式(对应代码中的test.html):

XML/HTML Code复制内容到剪贴板

  1. <script class="lazy" data-src="../js/imgLoader.js"></script>    
    <script>    
    imgLoader(['../img/page1.jpg', '../img/page2.jpg', '../img/page3.jpg'], function(percentage){    
    console.log(percentage)    
    });    
    </script>

运行结果:

如何利用图片预加载组件提升html5移动页面的用户体验


2. demo说明
本文开篇给出的效果,对应的页面是index.html,关于这个效果还有两个问题需要说明:
1)它用了之前这篇博客Hammer.js+轮播原理实现简洁的滑屏功能介绍的滑屏思路,并把它的一些逻辑包装在了swipe.js,对外提供了一个全局变量Swipe,这个模块有一个init的方法,以便外部通过调用Swipe.init()就能初始化滑屏相关的功能,原来没有提供这个init方法,在js加载完毕就会初始化滑屏功能,有了这个init方法就可以把滑屏的逻辑延迟到加载完毕的时候去初始化。index.html一共引用了5个js:

XML/HTML Code复制内容到剪贴板

  1. <script class="lazy" data-src="js/zepto.js"></script>    
    <script class="lazy" data-src="js/transition.js"></script>    
    <script class="lazy" data-src="js/hammer.js"></script>    
    <script class="lazy" data-src="js/imgLoader.js"></script>    
    <script class="lazy" data-src="js/swipe.js"></script>

其中imgLoader.js就是前面介绍图片加载器的实现,前三个js都是为最后一个swipe.js服务的,感兴趣的可以继续我的博客利用轮播原理结合hammer.js实现简洁的滑屏功能了解相关内容。不过滑屏不是本文的重点,不了解swipe.js不会影响理解本文的内容~
2)虽然我在demo中用到了3张比较大的图片,但是由于在本地环境,加载速度还是非常快,所以一开始的时候,很难看到预加载的效果,最后只能想办法在每个进度回调之前做一下延迟,这才可以看到前面gif图片一开始的那个loading效果,实现方式是:

XML/HTML Code复制内容到剪贴板

  1. //模拟加载慢的效果    
    var callbacks = [];    
    imgLoader(['img/page1.jpg', 'img/page2.jpg', 'img/page3.jpg'], function (percentage) {    
    var i = callbacks.length;    
    callbacks.push(function(){    
    setTimeout(function(){    
    var percentT = percentage * 100;    
    $('#loader__info').html('Loading ' + (parseInt(percentT)) + '%');    
    $('#loader__progress')[0].style.width = percentT + '%';    
    if (percentage == 1) {    
    setTimeout(function(){    
    $('#loader').remove();    
    Swipe.init();    
    }, 600);    
    }    
    callbacks[i + 1] && callbacks[i + 1]();    
    },600);    
    });    
    if(percentage == 1) {    
    callbacks[0]();    
    }    
    });

在真实环境,最好还是不要刻意去加这种延迟,没必要为了让用户看到一个好看有趣的加载效果,就浪费它不必要的等待时间,所以真实环境还是应该用下面的代码:

XML/HTML Code复制内容到剪贴板

  1. imgLoader(['img/page1.jpg', 'img/page2.jpg', 'img/page3.jpg'], function (percentage) {    
    var percentT = percentage * 100;    
    $('#loader__info').html('Loading ' + (parseInt(percentT)) + '%');    
    $('#loader__progress')[0].style.width = percentT + '%';    
    if (percentage == 1) {    
    $('#loader').remove();    
    Swipe.init();    
    }    
    });

3. 注意事项
预加载是一种比较常见的实现效果,但是在使用的时候,有些问题需要注意:
1)什么时候用
页面大的时候用,一般页面大小超过3M就该考虑使用;页面内包含数据量比较大的图片,在手机端测试能够明显看到加载缓慢的时候,可以考虑使用。
2)尽量使用sprite图片
3)加载效果实现的时候,尽量不用图片,即使要用也应该用很小的图片,否则加载效果卡在那就没有意义了。
4. 总结
主要介绍了一个简单的图片预加载器,可应用于h6移动页面的开发当中,在它的思路之下,如果有必要的话,还可以对它进行一些改造,用它来加载其它类型的资源,比如音频或者视频文件,毕竟这些类型的DOM对象也都有提供类似Image对象的属性和回

看完上述内容,你们对如何利用图片预加载组件提升html5移动页面的用户体验 有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注编程网行业资讯频道,感谢大家的支持。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

如何利用图片预加载组件提升html5移动页面的用户体验

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

如何利用预取技术提升Web性能:减少加载时间,优化用户体验

我们都曾遭遇过这样的烦恼:漫长的加载界面之后,却只等来了毫无反应的网页。随处可见的加载图标不停旋转,但一切似乎都停滞不前。

编程热搜

  • Python 学习之路 - Python
    一、安装Python34Windows在Python官网(https://www.python.org/downloads/)下载安装包并安装。Python的默认安装路径是:C:\Python34配置环境变量:【右键计算机】--》【属性】-
    Python 学习之路 - Python
  • chatgpt的中文全称是什么
    chatgpt的中文全称是生成型预训练变换模型。ChatGPT是什么ChatGPT是美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型,它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动,并协助人类完成一系列
    chatgpt的中文全称是什么
  • C/C++中extern函数使用详解
  • C/C++可变参数的使用
    可变参数的使用方法远远不止以下几种,不过在C,C++中使用可变参数时要小心,在使用printf()等函数时传入的参数个数一定不能比前面的格式化字符串中的’%’符号个数少,否则会产生访问越界,运气不好的话还会导致程序崩溃
    C/C++可变参数的使用
  • css样式文件该放在哪里
  • php中数组下标必须是连续的吗
  • Python 3 教程
    Python 3 教程 Python 的 3.0 版本,常被称为 Python 3000,或简称 Py3k。相对于 Python 的早期版本,这是一个较大的升级。为了不带入过多的累赘,Python 3.0 在设计的时候没有考虑向下兼容。 Python
    Python 3 教程
  • Python pip包管理
    一、前言    在Python中, 安装第三方模块是通过 setuptools 这个工具完成的。 Python有两个封装了 setuptools的包管理工具: easy_install  和  pip , 目前官方推荐使用 pip。    
    Python pip包管理
  • ubuntu如何重新编译内核
  • 改善Java代码之慎用java动态编译

目录