分类:: 前端

0

网站大图片加载原理

前面一篇博客讲述的是图片的懒加载过程,即只有页面滑动到图片所在的位置时才会触发加载的操作。本文在此基础上进行了进一步的研究,即不管用户什么时候打开页面,所有的图片都加载了,而不是给用户显示一个Loading的图标,只不过我们的初始显示的图片是模糊的,后面再慢慢加载清晰,保证网页加载是流畅的。 有两张图片,都是樱花图,sakura.jpeg和sakura_min.jpeg两张。分别如下: 大小是6

0

[转]使用jQuery实现图片懒加载原理

在网页中,常常需要用到图片,而图片需要消耗较大的流量。正常情况下,浏览器会解析整个HTML代码,然后从上到下依次加载<img src="xxx">的图片标签。如果页面很长,隐藏在页面下方的图片其实已经被浏览器加载了。如果用户不向下滚动页面,就没有看到这些图片,相当于白白浪费了图片的流量。 所以,淘宝、京东这些流量非常巨大的电商,商品介绍页又必须有大量的图片,因此,

0

重新播放CSS动画

对于做前端动画的同学来说,动画库Animate.css并不陌生。我们往往希望一个动画能够重复播放,首先以一个简单的动画shake为例: 12345678910111213141516171819202122232425262728293031.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -w

0

预加载让页面生动起来

随着现在网站数量的爆炸式增长,越来越多的用户感到了信息爆炸带来的压力。互联网企业如何让自己的网站在如此众多的网站中脱颖而出,不仅需要自身强劲的企业实力,还需要一个好看的“门面”,这里指的是网站的UI或者App的UI。本文主要是探讨网络情况不佳时如何让用户的体验不那么糟糕?虽然这个要求比较急切,但是很多企业根本就不重视,这样是不好滴!今天就跟大家聊一聊网站的预加载。 作品赏析在进行深入的讨论之前我们

0

(译)HTML编程风格指南

这个页面简单地说明了jQuery各个项目中HTML编程的风格。 静态检测使用grunt-html来检测错误以及潜在的问题。大多数jQuery的项目都有一个Grunt构建任务以用于静态检测所有的CSS文件: grunt htmllint。 空格通常来讲,jQuery的编程风格提倡代码具有一定的空格以提高代码的可读性。 使用tab键进行缩进。 不要直接使用html, body, script, 或者

0

(译)CSS编程风格指南

这个页面简单地说明了jQuery各个项目中CSS编程的风格。 静态检测使用CSSLint来检测错误以及潜在的问题。大多数jQuery的项目都有一个Grunt构建任务以用于静态检测所有的CSS文件: grunt csslint。关于CSSLint的配置项保存在.csslintrc文件中。 每一个.csslintrc文件都遵循一个特定的格式。所有的配置项都必须按字母排序并且分好组: 1234567&#

0

(译)JavaScript编程风格指南

静态检测使用JSHint来检测错误以及潜在的问题。大多数jQuery的项目都有一个Grunt构建任务以用于静态检测所有的CSS文件: grunt jslint。关于CSSLint的配置项保存在.jslintrc文件中。 每一个.jslintrc文件都遵循一个特定的格式。所有的配置项都必须按字母排序并且分好组: 123456789101112{ "common1": true,

0

CSS3滤镜

语法1filter: function(param); 很很多CSS3属性一样,监狱支持情况需要使用浏览器前缀,CSS滤镜支持的方法有 grayscale 灰度 sepia 褐色 saturate 饱和度 hue-rotate 色相旋转 invert 反色 opacity 透明度 brightness 亮度 contrast 对比度 blur 模糊 drop-shadow 阴影 模糊 -we