- 浏览: 2568178 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (1286)
- js-oop (2)
- js-window (10)
- js-event (19)
- js-string (37)
- js-array (27)
- js-page (4)
- js-dom (62)
- js-lang (8)
- js-number (7)
- js-platform (3)
- js-object (15)
- js-element (3)
- js-browser (7)
- js-url (6)
- js-date (10)
- css基础 (48)
- css优化 (15)
- html基础 (17)
- html标签 (19)
- js基础 (117)
- js-兼容性差异 (33)
- js引擎 (3)
- js性能 (14)
- json (6)
- jQuery源码浅析 (43)
- web mobile开发资料 (78)
- js跨域 (2)
- html5 (74)
- html5-canvas (7)
- css3 (53)
- 浏览器 (5)
- api设计学 (3)
- js-加载 (3)
- linux (37)
- 架构师 (1)
- php (2)
- self开发的脚本库--凤凰 (2)
- web应用名词 (6)
- javascript新特性翻译 (8)
- ajax (6)
- jQuery动画效果 (7)
- prototype的解读 (13)
- 优秀插件翻译 (1)
- css解决方案 (26)
- 数据库 (2)
- english daily (59)
- 浏览器内核探究 (1)
- jQuery插件介绍 (9)
- jquery基础篇 (26)
- chrome浏览器问题整理 (14)
- js选择器那些事 (3)
- 前端框架 (26)
- Firefox私有属性 (11)
- webkit私有属性集合 (17)
- 书籍推荐 (21)
- 数据结构 (1)
- 网站建设相关 (7)
- 好文翻译 (2)
- 个人作品 (3)
- kissy的解读 (4)
- css-layout(布局研究) (5)
- less研究 (1)
- YUI探究 (1)
- hash探究 (1)
- js动画 (7)
- 前端面试题 (37)
- css书写规范 (1)
- js模板引擎 (6)
- js模块化 (19)
- 编写高质量代码 (3)
- 性能探究--应用协议 (2)
- 前端图像处理 (19)
- Mac OS相关 (21)
- 正则表达式 (11)
- 离线应用相关 (0)
- 前端工具 (65)
- nodeJS (55)
- jquery优化篇 (2)
- 设计模式探究系列 (3)
- windows7 (2)
- IE10 (10)
- 微博开放平台探究 (2)
- 常用web服务接口 (1)
- 数据存储相关 (8)
- 零时文件 (2)
- jQuery Mobile (16)
- backbone (15)
- underscore (22)
- sass (11)
- android (3)
- phonegap (10)
- IE私有 (11)
- qwrap (8)
- git (14)
- chrome extensions (5)
- freemarker (11)
- angularJS (3)
- seo (2)
- markdown (3)
- css动画 (4)
- 安卓开发 (2)
- React (7)
- 活动页技术 (1)
- 网络安全 (3)
- grunt (7)
- Lo-Dash (3)
- 前端国际化 (4)
- 版本控制 (2)
- 盒模型 (4)
- 微信开发 (1)
- Mock数据工具 (1)
- sails (1)
- vim (1)
- js-color (1)
- iOS 基础 (43)
最新评论
-
jertom:
<div id="showInfo" ...
addEventListener等事件监听的参数细谈 -
乌托邦国王:
引用[u][/u]
css3动画属性系列之transform细讲移动translate -
hvang1988:
能提供附件下载吗,找不到js库,google封了访问不了
Syntaxhighlighter---代码高亮插件介绍 -
sscsacdsadcsd:
我的天 那到底是为什么function是object我看und ...
typeof func ==='function'的疑惑 -
wkjiangwk:
试了,没用,你们从不去测试。
介绍一下x-webkit-speech -------实现语音输入
问题与需求:
某个项目首页或者首屏在弱网络环境下,或者某些由于用户无意操作、浏览器自身当机等不可预估因素导致页面的某个主体css依赖文件没有加载,打开或者当机后再次页面的时候会页面整体“裸露”,考虑用户体验,我们会考虑给页面加一些提示,比如:
方案设计:
- 页面头部有一个固定的提示层,内部提示文字等带有内联的样式:
内联的目的很简单:保证自己是正常的,不依赖核心样式来控制自己的展现。
比如代码如下:
<div style="font-size:12px;color:#f00;padding:10px;border:1px #E6D191 solid;background:#ffffd1;text-align:center">您好,您的页面出现异常,有可能是因为浏览器缓存引起的,您可以试着清理几次浏览器缓存(shift+ctrl+delete),然后强刷页面(ctrl+F5)。 </div>
问题来了:我到底咋判断页面核心文件没有加载完成呢?
当然方式很多,本文介绍的方式很。。。。。
注意上面的div没有设置display:none吧,说明是显示的,那我们就在核心文件里面加上一个样式规则:
给包裹它的div设置为display:none!!!!!!!!!!!!!!!!!!!!!!!!!
------------------ 原理很简单:核心css文件没有加载成功,导致异常提示层没有被应用diaplay:none的规则,它就乖乖显示了。。。。。。。。。。。。。反之,如果文件依赖加载成功,样式规则就应用了,提示层就乖乖隐藏了!!!!!!!!!!!!!
后话:
本案例考虑的是css文件down掉!!!!!!!!!!!!!!!!!!!!!!
发表评论
-
TweenMax
2014-03-31 17:32 997TweenMax: 在线调用:http ... -
动画框架之Sprite
2014-02-18 13:44 939Sprite.js An ... -
bootstrap分拆之table
2013-07-11 14:44 0本文整理一下bootstrap中tabl ... -
jquery全屏版插件
2013-04-11 13:29 0先贴上代码: ;(function($) ... -
好东西之--获取ie版本号的一种方式
2013-05-08 10:22 1529先看一段jqm1.1.0版本的代码: ... -
backboneJS
2013-02-21 17:05 1326backbone.js 重量级js ... -
Sizzle简介
2013-01-28 12:21 1469Sizzle 从jq的1.3开始,jq也采用S ... -
a javascript module pattern
2013-01-21 14:13 1378本文介绍一种不错的module pattern. ... -
响应式框架Foundation简介
2013-01-15 19:34 0响应式框架:Foundation 官方地址: ... -
Turn.js简介
2013-01-14 11:18 1482本文简单介绍一下turn.js这个东东! 主 ... -
AppJS简介
2013-01-10 19:49 1991本文介绍一下AppJs. 官网:http:// ... -
移动框架Zeptp介绍
2012-12-13 13:10 1567本文简单介绍一下Zepto. 基于移 ... -
关于页面依赖文件加载失败处理的一种“独特”设计
2012-12-07 16:59 1问题与需求: 某个项目首页或者首屏在弱网络环境下,或 ... -
内容复制兼容性解决方案之ZeroClipboard
2012-12-03 13:24 2588Zero Clipboard 1、简介: J ... -
项目开发设计之设计文档编写规范
2012-11-18 14:57 3470前言: 慢慢地,很多fe也会接触到一些比较大中型的项目 ... -
初识BigPipe
2012-11-12 14:38 1526BigPipe ------ 一个重新设计的基础动态 ... -
关于专业化前端的自我修养总结反思篇
2012-10-21 16:48 3945前言: 其实很 ... -
关于专业化前端的自我修养总结反思篇
2012-10-21 16:45 3前言: 其实很多fe,当然包含我自身,很多时间很多场 ... -
框架设计之Get first Set all原则
2012-10-11 17:46 1290本思想其实很简单: Get first: ... -
思考js框架模型
2012-09-27 11:29 1591其实这两个词都不陌生,也有很多人研读了各个流行开源库的源码,甚 ...
相关推荐
boa开源代码解决cgi依赖库加载失败的问题 int complete_env(request * req) { ...... char *env = getenv("LD_LIBRARY_PATH"); if (NULL != env) my_add_cgi_env(req, "LD_LIBRARY_PATH", env); .......
“未能加载文件或程序集“System.Web.Http.WebHost, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35”或它的某一个依赖项。系统找不到指定的文件。” “未能加载文件或程序集“System.Web....
解决Log4net.dll程序集版本不一致,找到的程序集清单定义与程序集引用不匹配的问题
maven项目导入依赖失败的一种解决方法
UE5 动态PAK加载解决方案及工程案例文件 (依赖付费PakLoader插件和免费的runtime Files downloader插件) 仅包含5.0版本工程源文件DEMO及PAK文件, PAK包含一个音效资源,一个模型资源,一个材质资源,一个actor。 ...
本文档把js加载做成vue组件,便于在其他模块引用,符合vue整体思路,供大家参考借鉴
用法非常简单,基于原生 JS CSS 开箱即用 在head中引入css,在body第一行引入js 即可失效酷炫的页面加载特效 详细介绍参考 https://zzzmh.cn/single?id=53
一键删除非常nice,快来下载资源吧,省钱省力省事!
Dependencies和depends walker用法相同,可以检测出当前dll文件的依赖关系,Dependencies并且更为明显的显示出对应依赖库的绝对路径,查询问题更为方便快捷。 问题案例: 无法加载 DLL“XXXTest.dll”: 找不到指定的...
异常详细信息: System.BadImageFormatException: 未能加载文件或程序集“XXX”或它的某一个依赖项。试图加载格式不正确的程序。 源错误: 执行当前 Web 请求期间生成了未处理的异常。可以使用下面的异常堆栈跟踪信息...
Delayed JS 是一种轻量级解决方案,旨在通过动态加载和依赖跟踪来延迟 JavaScript 文件和脚本的加载,而无需外部加载大型库。 它有助于防止页面呈现阻塞,从而使页面加载速度更快,并满足谷歌的页面速度建议。 使用...
用于一键清理maven依赖下载失败生成的.lastUpdated文件, 以及解决在无法连接远程仓库情况下导致的本地依赖找不到的批处理脚本 Could not resolve dependencies for project xxx _remote.properties
我用的是我上传的mysql安装包。 linux64位mysql安装包依赖文件 linux 64位 mysql安装包 依赖文件
cache-loading.js是一款轻量级的 无依赖炫酷页面预加载Loading特效插件----目前48种效果也可以加载自己的gif图片。它能帮助我们创建一个全屏遮罩效果的旋转loading效果来模拟页面预加载过程。
原生无依赖,预加载插件
解决maven下载依赖失败的错误文件的命令执行文件
制作绿色软件必备的一款小工具,用于查看并提取EXE文件运行所需要的全部DLL文件,运行后,选择EXE进程,点击查看加载文件,可以查看该EXE文件所加载的所有DLL文件,加载的DLL可直接复制到指定文件夹中。
Visual Studio 在编译C#时未能加载文件或程序集解决方案, 您一定可以通过它来解决这个问题!
未能加载文件或程序集“AspNetPager”或它的某一个依赖项。系统找不到指定的路径。 说明: 执行当前 Web 请求期间,出现未经处理的异常。请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出处的详细信息。 ...
AssetBundle在文件夹中通过资源依赖进行加载使用资源的一种方法