欢迎光临
我们一直在努力

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

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

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

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

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

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

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

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

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

那么接下来就是通过判断用户的一些操作也按需要显示图片。

这里说一个例子,一个HTML文档上部有一些文字介绍,下面有8张容量比较大的图片,它们并不在浏览器第一屏的视野里。

因为不是所有人都会拉动浏览器的scroll,所以当网页加载的时候,我们完全没有必要把这8张大图加载出来,统一用图像占位符space.jpg。

这时候我们判断,当用户拉动scroll,让这些图片显示在屏幕当中的时候,我们在来展示图片。

其实我们只需要做两件事情:

1.编写一个显示图片的函数;

2.当发生window.onscroll事件时作出判断,如果当前图片在屏幕显示位置,则调用这个显示图片的函数。

——

<!DOCTYPE HTML>
<html lang=”zh-cn”>
<head>
<meta charset=”UTF-8″>
<title>图片延时加载技术(一)</title>
<meta name=”author” content=”Hito,vip@hioty.org”/>
<style>
* {margin:0;padding:0;}
img {border:none;}
ul,li {list-style:none}
.space {width:900px;height:700px;background:#ccc;margin:auto;text-align:center;
line-height:800px;color:white;font-size:80px}
ul {text-align:center;margin:10px auto;width:900px}
ul li {float:left;border:1px solid red;margin:10px}
ul li img {width:200px;}
</style>
<script>
function loadimg(obj){
var imgsrc=obj.getAttribute(“data”);
if(imgsrc){
obj.src=imgsrc;
obj.removeAttribute(“data”);}
else{
return false;
}
}
window.onscroll=function(){
var bodyheight=document.body.clientHeight;
var imgobj=document.getElementsByTagName(“ul”)[0].getElementsByTagName(“img”);
var scrollTop = document.documentElement.scrollTop || window.pageYOffset ||
document.body.scrollTop;
for(var i=0;i<imgobj.length;i++){
if(imgobj[i].offsetTop-scrollTop<bodyheight){
loadimg(imgobj[i]);
}
}
}
</script>
</head>
<body>
<div class=”space”>这里是其它内容</div>
<ul>
<li><img src=”space.jpg” data=”http://www.paloinino.com/gallery/10.jpg”/></li>
<li><img src=”space.jpg” data=”http://www.paloinino.com/gallery/12.jpg”/></li>
<li><img src=”space.jpg” data=”http://www.paloinino.com/gallery/13.jpg”/></li>
<li><img src=”space.jpg” data=”http://www.paloinino.com/gallery/14.jpg”/></li>
<li><img src=”space.jpg” data=”http://www.paloinino.com/gallery/15.jpg”/></li>
<li><img src=”space.jpg” data=”http://www.paloinino.com/gallery/16.jpg”/></li>
<li><img src=”space.jpg” data=”http://www.paloinino.com/gallery/17.jpg”/></li>
<li><img src=”space.jpg” data=”http://www.paloinino.com/gallery/19.jpg”/></li>
</ul>
</body>
</html

——

当然,你还可以作出更为友好的方案。

如当浏览器在异步加载图片时候用展示加载提示栏,加载失败提示用户或者自动重新加载等。

——

网页图片延时加载有利有弊,主要看您是为了SEO而SEO,还是为了用户体验而SEO,前者就不用延时加载了,后者可以使用。

当然,如果不用网页图片延时加载技术,而尽量在不影响图片质量的前提下压缩图片,也是不错的选择。

赞(0) 打赏
未经允许不得转载:哈哈 » 真正的SEO技术:网页图片延时加载技术

评论 抢沙发

更好的WordPress主题

支持快讯、专题、百度收录推送、人机验证、多级分类筛选器,适用于垂直站点、科技博客、个人站,扁平化设计、简洁白色、超多功能配置、会员中心、直达链接、文章图片弹窗、自动缩略图等...

联系我们联系我们

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续提供更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏

登录

找回密码

注册