这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
我们大家都知道,对于一个网站最占用带宽,最影响页面显示速度的东西就是图片。图片是很重要的,作为一个站长我们是千方百计的使用各种技巧来优化图片,但其实有一种简单的方法,只需要几行代码就能达到这种效果。同时还附加一种淡入淡出的显示效果,下面一起来看看。
话不多说,直接看示例
首先是图片标记的写法
- <img data-src="/images/image.jpg" alt="">
需要将图片的地址放到
属性里,而
- data-src
值不需要,直接将
- src
属性去掉。
- src
CSS 代码
所有具有
属性的图片,我们将其初始显示状态为不可见,通过透明度来调节:
- data-src
- img {
- opacity: 1;
- transition: opacity 0.3s;
- }
- img[data - src] {
- opacity: 0;
- }
这样写的作用是什么?等当图片加载时,你就能看的效果了。
JavaScript 代码
我们最终会将
属性去掉,换成 src 属性,但这是图片加载成功后的动作:
- data-src
- [].forEach.call(document.querySelectorAll('img[data-src]'),
- function(img) {
- img.setAttribute('src', img.getAttribute('data-src'));
- img.onload = function() {
- img.removeAttribute('data-src');
- };
- });
相比起其它各种的图片延迟加载技术,这种方法非常的简单,它几乎不要求其它任何条件,可以用在任何地方,使用起来非常灵活。
但是要注意的是,简单有简单的好坏,也会因为简单而不足。它不具有图片图片滚动到可视窗口内再加载的功能。最终使用哪种技术,还是要看场景而定。
来源: http://www.phperz.com/article/17/0517/332341.html