文章关键字 ‘加载’

图片加载失败后CSS样式处理最佳实践

2020年10月24日,星期六

图片加载失败最佳实践封面图

图片加载失败的默认UI是比较丑陋的,因为前端开发会使用出错图进行替换,但是这种做法会隐藏图像的内容信息,有没有什么办法在CSS样式美化同时显示图像的信息呢?本文就介绍我摸索出来的应对此场景的最佳实践技巧,希望可以对您的工作与学习带来帮助。

阅读全文…

浏览器IMG图片原生懒加载loading=”lazy”实践指南

2019年09月30日,星期一

原生懒加载头图封面图

本文介绍自己在研究与实践Lazy loading原生懒加载得到的结论与知识,scroll滚动,resize缩放,网速,屏幕高度都是影响特性,同时也会介绍在JavaScript中的一些实用tips。

阅读全文…

开源移动端元素拖拽惯性弹动以及下拉加载两个JS

2017年01月25日,星期三

开源两个起点中文网M站两个动效交互JS,封装良好,即插即用。一个是任意元素屏幕拖移外带惯性边缘弹动效果,另外一个是基于窗体的下拉释放加载刷新效果。

阅读全文…

内容loading加载后高度变化CSS3 transition体验优化

2015年01月22日,星期四

现在web技术不断发展,视图与数据渲染更多由前端呈现,后台更多与数据打交道。于是,我们会经常看到这样的交互场景。页面加载,看到一个框框里面有个菊花在转,然后内容呈现;或者点击个按钮,菊花在转,然后列表动态加载呈现。

确实,功能上OK,有菊花,用户也愿意等。但是,大家有没有觉得所有交互,出现菊花→出现内容,都是“砰砰砰”很生硬的感觉,尤其当内容是动态,高度不确定的时候。我们使用一些比较好的手机APP(如微信)的时候一定不会有这样的感觉,整个交互流程都是很流畅的,就像山涧的泉水,涓涓细流到山脚,而不是巨人在峡谷走路的感觉。

所以,如果菊花的呈现到内容的展示能够通过自然的动画过渡呈现,势必会增强用户体验。

而本文就将分享,我是如何渐进处理,让动画过渡呈现更自然的…… 必须的,demo,截图,源代码展示一个不少,希望本文的内容能够对您的学习有所帮助。

阅读全文…

CSS3实现鸡蛋饼饼图loading等待转转转

2014年04月25日,星期五

今天,要实现一个长任务等待提示效果。然后设计师就把做好的gif效果图给我,就是下面这个,转转转等待提示效果。按照大众做法,我应该是把图片直接按图索骥,调调布局,然后早早回家抱老婆。
但是,我这个人,天生不安分守己。想到是用在客户端,客户端又是用的webkit内核,于是,立马决定使用CSS3来折腾一番……

阅读全文…

小tip: CSS3 animation渐进实现点点点等待提示效果

2013年06月9日,星期日

一个名叫“阿贾克斯”的屌丝男在名为“客户端”的学校上学,为了追女神,下狠心,借了高利贷给女神买Mac. 结果,期限已到,要债的找上门,没办法,只能向身在“服务器端”的父母要钱。但是,要钱是要一定的过程和时间的。他必须想办法向要债的表明,钱正在过来的过程中,否则,可能要债的会认为你在忽悠,直接使大招——”Ctrl+W”,瞬间灭了你,眼不见心不烦。
如果告知钱正在过来的过程中呢?
有人可能如下处理,弄个转转转的小图片告诉要债的,看,我在原地不停地转……

阅读全文…

翻译 – 高性能网站需避免的7个错误

2011年11月28日,星期一

假期临近(应该指感恩节和圣诞节),公司增加了SEM方面的花费,关注SEO,修改页面。然而,为了最大的销售额,这些时间、财力上的付出可能就是打水漂——如果假期增加了访问量让网站速度变慢甚至下去的话。
性能影响用户是毫无疑问的。网站速度直接影响反弹率、转化率、收入、用户满意度、搜索引擎优化(已知的如反映网站流行度的Page Rank)以及几乎所有值得追踪的业务。用户离开速度慢的网站,而且往往不会再回来。
还在不久前,用户离开一个网站的时间点是8秒。然而,很快就是6秒,然后4秒,然后现在是2秒……

阅读全文…

新版无图片版zxxbox jQuery弹出框插件

2010年09月7日,星期二

当初写zxxbox jQuery弹出框插件纯粹是学习的目的,另外就是临时应付个人站点上的一些弹框应用。所以写得比较简单,业余,并没有期望谁会去使用它。但是,后来,一些同行的留言以及相关的交流发现,还是有人使用此轻便,简洁的弹框效果的。

但是,一方面由于自己之前的水平比较稚嫩,同时,对插件的逻辑没有很好的梳理。所以,之前版本的弹出框插件,虽然也能用,但是,功能确实有效,不能给内置的弹框按钮添加回调方法,不支持Ajax加载,而且,还有些小的隐晦的bug等,在调用上也是有点不利索的。所以,这几天,我就把之前的zxxbox弹出框插件重新写了下。虽然弹框的UI界面还是更之前的一样,但是,内部的逻辑,调用,以及参数等都有所不同,可以说是从底层核心都改变了。所以,只是简单的以插件更新的方式放在之前的文章下,则会有有力使不出的感觉。故,另起一篇文章,对新版的zxxbox弹出框插件参数,使用等细致地讲解下,希望对有需要的同行有所帮助。

阅读全文…

翻译 – CSS Sprites:实用技术还是生厌之物?

2010年03月30日,星期二


这是一篇翻译的文章,翻译的原因在于,我与原作者有类似的观点,即我自己也觉得CSS sprites的使用到了重新审视的时候。不过老实讲,本文作者在观点的表达以及论证上多少有些牵强,但是实际上,CSS sprites确实是需要善用的。难得的,本文没有demo,没有源文件。只是希望能够对您有一些新的启示。

阅读全文…