标签归档:图片加载

真正的SEO技术:网页图片预加载技术

前面我们说了网页图片延时加载技术,今天,我们再来说一下图片的预加载。

我们经常可以看到浏览器在加载大图的时候,通过自上而下这样铺过来,这样一来一是对用户体验不好,而是在图片下载完之前我们完全不知道图片大小,不利于控制网页界面。

真正的SEO技术:网页图片预加载技术插图

那么有没有一种方法,能让图片整体一次加载到网页上呢,答案是有的,那就是图片预加载技术。

来看下面一个例子:

——

<script>
function preloadimg(url,callback){
var Img=new Image();
Img.onload=callback;
Img.src=url;
}
window.onload=function(){
preloadimg(“http://localhost/example.jpg”,function(){document.getElementsByTagName(“img”[0]
.src=”http://localhost/example.jpg”});
}
</script>

——

其实非常简单了,它的基本原理就是先用JS获取到服务上的图片,获取到之后,浏览器会缓存起来,等到需要的时候,我们在HTML插入图片,浏览器会直接使用缓存的图片。

这样,图片预加载技术可以让图片在用户不知晓的情况下就完成了下载,用户不必在去漫长的等待,可以说,对于提高网站的用户体验来说是非常有用的。

继续阅读

真正的SEO技术:网页图片延时加载技术

当一个网站访问量过大时,过多的图片展示往往会影响其网页的加载速度,过多没用的图片加载既影响用户体验,又会增加服务器的负载,可以说有百害而无一利。

相信做前端的人都知道“Ajax”,Ajax的核心是“按需异步加载”。

当用户需要数据库时候,去服务器上拿数据,然后给用户展示出来,这样做的优点无疑是很多的。

真正的SEO技术:网页图片延时加载技术插图

实际上,网页在加载图片时也会有类似Ajax的异步加载技术。

我们知道,浏览器在解析html文档时,遇到img标签的src属性就是用过get请求的方式,从服务器上获取图片,html中的img标签有多少,浏览器就会从服务器上获取多少个图片。

图片的延时加载技术就从这个地方着手,把HTML文档中需要延时加载的img标签的src都指定成同一张图片,用过另外一个非标准的属性来指定图片的实际位置,如下:

<img src=”space.jpg” data=”reallyimg.jpg”/>

如果我的有10个img标签,实际上只需要下载一张图片占位符就可以了。

继续阅读