AngularJS项目开发技巧之图片预加载

绪

项目(移动端采用Ionic 框架)开发完毕，测试阶段发现移动APP首页的广告图片(图片由服务器端返回相应url地址)很难加载，主要原因还是网速。如下图左所示，图片加载完毕如下图右所示。

           

问题分析

尝试进行图片加载的优化工作。

经过与Ionic群内卖火柴朋友的聊天，获取到如下内容:手机端访问速度受服务端带宽的限制。一个接收一个传输，和两方都有关系。服务器对app影响是很大的。2M 一般是网站使用还可以  app会不乐观。增加服务器带宽比在客户端做工作要好很多，还有就是服务图片优化。缓存机制只是下载后的事情，再说ionic的拉数据加上缓存有bug。只能是轮番 和一些固定图片可以使用。因此考虑使用缓存机制的策略暂时告吹。

问题解决

提升服务端带宽。2M-->?M

在这里只是提供一个解决问题的思路，若大家有什么好的建议或想法可以给我留下你宝贵的评论，谢谢。

美文美图

AngularJS进阶(三十)AngularJS项目开发技巧之图片预加载的更多相关文章

  1. AngularJS进阶(三十六)AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记)

    AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记) 前言 在"AngularJS项目开发技巧之图片预加载" ...

  2. AngularJS进阶(三十一)AngularJS项目开发技巧之获取模态对话框中的组件ID

    AngularJS项目开发技巧之获取模态对话框中的组件ID 需求 出于项目开发需求,需要实现的业务逻辑是:药店端点击查看"已发货""已收货"订单详情时,模块弹出 ...

  3. 【原创】从零开始搭建Electron+Vue+Webpack项目框架（五）预加载和Electron自动更新

    导航: (一)Electron跑起来(二)从零搭建Vue全家桶+webpack项目框架(三)Electron+Vue+Webpack,联合调试整个项目(四)Electron配置润色(五)预加载及自动更 ...

  4. HBuilder mui 手机app开发 Android手机app开发 ios手机app开发 打开新页面 预加载页面 关闭页面

    创建子页面 在mobile app开发过程中,经常遇到卡头卡尾的页面,此时若使用局部滚动,在android手机上会出现滚动不流畅的问题: mui的解决思路是:将需要滚动的区域通过单独的webview实 ...

  5. AngularJS进阶(三十九)基于项目实战解析ng启动加载过程

    基于项目实战解析ng启动加载过程 前言 在AngularJS项目开发过程中,自己将遇到的问题进行了整理.回过头来总结一下angular的启动过程. 下面以实际项目为例进行简要讲解. 1.载入ng库 2 ...

  6. AngularJS进阶(三十八)上拉加载问题解决方法

    AngularJS上拉加载问题解决方法 项目中始终存在一个问题:当在搜索栏输入关键词后(见图1),按照既定的业务逻辑应该是服务端接收到请求后,首先返回查询的前7条数据,待客户端出现上拉加载时,继续查找 ...

  7. Andriod开发技巧——Fragment的懒加载

    我们在做应用开发的时候,一个Activity里面可能会以viewpager(或其他容器)与多个Fragment来组合使用,而如果每个 fragment都需要去加载数据,或从本地加载,或从网络加载,那么 ...

  8. AngularJS进阶(三十五)浏览器兼容性解决之道

    浏览器兼容性解决之道 前言 浏览器兼容性一直是前端开发中不得不面对的一个问题.而最突出的就是IE.对绝大多数公司来说,兼容IE6的性价比已经很低,而IE7则几乎已经绝迹.所以,常见的兼容性下限是IE8 ...

  9. AngularJS进阶(三十四)Angular数据更新不及时问题探讨

    Angular数据更新不及时问题探讨 前言 在修复控制角标正确变化过程中,发觉前端代码组织层次出现了严重问题.传递和共享数据时自己使用的是rootScope,为此造成了全局变量空间的污染.根据< ...

随机推荐

  1. Dockerfile怎么创建镜像

    编写完成 Dockerfile 之后,可以通过 docker build 命令来创建镜像. 基本的格式为 docker build [选项] 路径,该命令将读取指定路径下(包括子目录)的 Docker ...

  2. [精简版]snowing snow

    CSS <style> body { background: #eee; } @keyframes mysnow { 0% { bottom: 100%; opacity: 0; } 50 ...

  3. 前端CSS技术全解（二）

    欢迎转载,转载请标明出处: http://blog.csdn.net/johnny901114/article/details/52813761 本文出自:[余志强的博客] 一.CSS三大特性 1)继 ...

  4. Dynamics CRM2016 Web API之通过实体的primary key查询记录

    CRM2016启用了webapi 而弃用了odata,作为码农的我们又开始学习新东西了. 下面是一段简单的查询代码,通过systemuser的primary key来查询一条记录 Web API查询方 ...

  5. ORACLE EBS 表空间控制

    --1G=1024MB --1M=1024KB --1K=1024Bytes --1M=11048576Bytes --1G=1024*11048576Bytes=11313741824Bytes S ...

  6. ScrollView的阻尼回弹效果实现(仿qq空间)

    玩过新浪微博,qq空间等手机客户端的童鞋,都应该清楚,在主界面向下滑动时,会有一个阻尼回弹效果,看起来挺不错,接下来我们就来实现一下这种效果,下拉后回弹刷新界面,先看效果图: 这个是编辑器里面的界面效 ...

  7. [struts2学习笔记] 第四节 学着使用struts 2的tag标签

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/40349201 官方文档: http://struts.apache.org/relea ...

  8. javascript之内置函数

    1.常规函数 (1)alert函数:显示一个警告对话框,包括一个OK按钮. (2)confirm函数:显示一个确认对话框,包括OK.Cancel按钮. (3)escape函数:将字符转换成Unicod ...

  9. make、make clean、make install、make uninstall、make dist、make distcheck和make distclean

    Makefile在符合GNU Makefiel惯例的Makefile中,包含了一些基本的预先定义的操作:make根据Makefile编译源代码,连接,生成目标文件,可执行文件.make clean清除 ...

  10. 侧滑面板（对viewGroup的自定义）

    额,好吧,最近一直在做侧滑的事情,到目前为止一共是学了三种方法了,一个是直接加第三方开源框架SlidingMenu,第二给是用DrawerLayout,今天这个是用谷歌官方提供的在新的support- ...