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. JConsole/JvisualVM 远程连接失败处理

    今天在使用JConsole进行远程连接时,发现IP和端口在Windows下是可以远程telnet的,但是,使用JConsole时却无法连接. 我的环境如下: Windows下运行JConsole,准备 ...

  2. 安卓高级7 vitamio 视频框架 从raw文件下获取文件uri

    vitamio免费的拥有多种解码器 而且容易操作 我们先来看看原生视频播放器的怎么使用 原生的: package qianfeng.com.videoviewdemo; import android. ...

  3. 负载均衡LVS(DR模式)安装实战

    1.编译安装ipvsadm 首先从LVS官网下载tarball,解压后make && make install即可. 要注意的是LVS的依赖有:popt-static.libnl.ke ...

  4. Linux 下的一个全新的性能测量和调式诊断工具 Systemtap, 第 2 部分: DTrace

    DTrace的原理本系列文章详细地介绍了一个 Linux 下的全新的调式.诊断和性能测量工具 Systemtap 和它所依赖的基础 kprobe 以及促使开发该工具的先驱 DTrace 并给出实际使用 ...

  5. Swift中方法(method)所谓的lazy绑定简介

    我们知道在ruby之类的动态语言中对象方法可以先从类中预先抽取,然后再应用到某个具体对象上.这称为无绑定的method对象,也可以叫做lazy绑定. 下面举个例子: irb(main):004:0&g ...

  6. 剑指Offer——关于劳动合同，这6件事毕业生必须知道！

    剑指Offer--关于劳动合同,这6件事毕业生必须知道!   求职找工作,不少人拿到劳动合同的那刻,可能连合同内容都没看清,就挥着笔杆子"签签签".别急!劳动合同包含哪些条款你清楚 ...

  7. Android Multimedia框架总结（二十）MediaCodec状态周期及Codec与输入/输出Buffer过程（附实例）

    转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼yuiop:http://blog.csdn.net/hejjunlin/article/details/53183718 前言:前面几节都是 ...

  8. Android Topeka介绍

    概述 当你已经做Android开发一段时间,并苦于进入瓶颈,这个时候阅读一些优秀App的源码是最好的学习进阶方式,前几天,邀请去参加一个Android大会,我作为其中一个演讲者,专门讲解了Androi ...

  9. 硬件模块化机器人操作系统 Hardware Robot Operating System (H-ROS)

    原文网址:http://www.ros.org/news/2016/10/hardware-robot-operating-system-h-ros.html 推荐网址:https://h-ros.c ...

  10. shell命令执行hive脚本（hive交互，hive的shell编程）

    Hive执行方式 Hive的hql命令执行方式有三种: 1.CLI 方式直接执行 2.作为字符串通过shell调用hive –e执行(-S开启静默,去掉"OK","Tim ...