使用图片预加载,解决断网后无法从后台获取提示网络异常的logo图片的问题
项目中有需求,断网后,显示小提示窗,里面包含网络异常提示语和异常小logo图片。
在实际操作时,遇到,断网后,无法从后台获取异常小logo图片。
我是才用图片预加载的方法解决这个问题的,解决方法如下:
/*预加载图片*/
//var url = "http://192.168.0.5:8080/";
var url = getRootPath() ;
var urlImg = url+"/adms/********/images/messager-info.png";//警告图标路径
var imgPreLoadBox = []; /*预加载图片*/
preLoadImgs(1,urlImg); function preLoadImgs(i,url) {
imgPreLoadBox[i] = new Image(); //创建一个Image对象,实现图片的预下载
imgPreLoadBox[i].src = url;
} /*将预加载图片插入到div*/
function appendImgTo(divId,img){
if(img.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数
$(divId).append(img);
return; // 直接返回,不用再处理onload事件
} img.onload = function () {
$(divId).append(img);
}
} function getRootPath(){
//获取当前网址,如: http://localhost:8083/uim/********/meun.jsp
var curWwwPath=window.document.location.href;
//获取主机地址之后的目录,如: uim/******/meun.jsp
var pathName=window.document.location.pathname;
var pos=curWwwPath.indexOf(pathName);
//获取主机地址,如: http://localhost:8083
var localhostPaht=curWwwPath.substring(0,pos);
//获取带"/"的项目名,如:/uimcardprj
//var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
return localhostPaht;
}
使用图片预加载,解决断网后无法从后台获取提示网络异常的logo图片的问题的更多相关文章
- vue图片预加载
目的: 图片预加载能够使得用户在浏览后续页面的时候,不会出现图片加载一半导致浏览不流畅的情况. 一.方法一 项目打开的时候要对图片进行预加载,在App.vue里面的beforeCreate添加预加载程 ...
- Javascript图片预加载详解
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- Javascript图片预加载详解 分类: JavaScript HTML+CSS 2015-05-29 11:01 768人阅读 评论(0) 收藏
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 利用简洁的图片预加载组件提升h5移动页面的用户体验
在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http ...
- AngularJS进阶(三十)AngularJS项目开发技巧之图片预加载
AngularJS项目开发技巧之图片预加载 绪 项目(移动端采用Ionic 框架)开发完毕,测试阶段发现移动APP首页的广告图片(图片由服务器端返回相应url地址)很难加载,主要原因还是网速.如下图左 ...
- 转载:用Jquery实现的图片预加载技术,可以实现有序加载和无序加载!
一.背景 我们在做页面的时候,从用户体验的角度出发,肯定是希望用户以最快的速度看到完整的页面信息,但在实际情况中经常会遇到些问题. 比如受网速影响,页面加载素材的时间比较长,页面会出现短时间的错乱或者 ...
- jquery.imgpreload.min.js插件实现页面图片预加载
页面分享地址: http://wenku.baidu.com/link?url=_-G8miwbgDmEj6miyFtjit1duJggBCJmFjR2jky_G1VftD9eS9kwGOlFWAOR ...
- Javascript实现图片预加载【回调函数,多张图片】
使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多张图片预加载代码.当接二连三的案例中都涉及图片预加载时,就 ...
- JS实现图片预加载无需等待
网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...
随机推荐
- MVC--SSM和SSH简介
- 前端之css语法3
一 float属性 1 基本的浮动规则: block元素和inline元素在文档流中的排列方式. block元素通常被现实独立的一块,独占一行.多个block元素会各自新起一行,默认block预算宽度 ...
- 在用easyui中做CRUD功能时,当删除一行或多行数据后再点击修改会提示你选中了多行,如何解决这个bug了?
在用easyui中做CRUD功能时,当删除一行或多行数据后再点击修改会提示你选中了多行,如何解决这个bug了? 在删除成功后,加上这句话就可以了:$("#dg").datagrid ...
- 2018.10.09 NOIP模拟 好数(双向搜索)
传送门 直接双向搜索出两边可行解,然后把两边的可行解合并起来得出答案就行了. 注意合并的时候可以利用排序和单调性优化时间复杂度. 直接枚举合并是O(siza∗sizb)O(siza*sizb)O(si ...
- 2018.08.29 NOIP模拟 movie(状压dp/随机化贪心)
[描述] 小石头喜欢看电影,选择有 N 部电影可供选择,每一部电影会在一天的不同时段播 放.他希望连续看 L 分钟的电影.因为电影院是他家开的,所以他可以在一部电影播放过程中任何时间进入或退出,当然他 ...
- 2018.08.18 NOIP模拟 game(数位dp)
Game 题目背景 SOURCE:NOIP2015-SHY4 题目描述 Alice 和 Bob 正在玩一个游戏,两个人从 1 轮流开始报数,如果遇到 7 的倍数或者遇到的这个数的十进制表示中含 7 , ...
- android中Actionbar详解
1.什么是Action BarAction Bar被认为是新版Android系统中最重要的交互元素,在程序运行中一直置于顶部,主要起到的作用在于:1)突出显示一些重要操作(如“最新”.“搜索”等)2) ...
- Codeforces777D Cloud of Hashtags 2017-05-04 18:06 67人阅读 评论(0) 收藏
D. Cloud of Hashtags time limit per test 2 seconds memory limit per test 256 megabytes input standar ...
- date(): It is not safe to rely on the system’s timezone settings.
在执行php脚本时出现的错误: date(): It is not safe to rely on the system’s timezone settings.You are *required* ...
- C#中泛型类,泛型方法,泛型约束实际应用
前言 所谓泛型,即通过参数化类型来实现在同一份代码上操作多种数据类型. 泛型编程是一种编程范式,它利用“参数化类型”将类型抽象化,从而实现更为灵活的复用.在定义泛型类时,在对客户端代码能够在实例化类时 ...