对搜索引擎友好的图片延迟加载技术

先写一个思路,以后再贴代码。

在大数据时代,网站内容越来越丰富,图片数量越来越多,质量也越来越高。这意味着更加耗用带宽、流量。

如果一个页面有100张高清图片,比如游记,在不考虑延迟加载情况下,浏览器会在极短的时间内向服务器发起100个图片下载请求,但实际上用户并不需要短时间内看完100张图片,甚至用户有可能只看前面几张图片,那么这时不管对服务器来说还是对网络来说,还是对用户机器来说都会高负荷的运转起来,将极大的浪费资源。

因此,按需加载、延迟加载才能提供好的用户体验。

那么,延迟加载具体是怎样一个表现,简单的说就是用户打开一个图片较多的网页,如果网页有滚动条,那么浏览器将只加载用户视野范围内浏览器区域的图片,滚动条以下的图片不会自动加载,只有当用户拖动滚动条时,图片出现在浏览器显示区域时才执行加载。

目前有很多第三方的图片延迟加载js库,都能实现图片延迟加载效果。但是,大多数延迟加载js库的技术原理对搜索引擎并不友好,我今天要说的正是如何既实现延迟加载,又满足对搜索引擎友好的方法。

先说一下什么是对搜索引擎友好。搜索引擎在抓取网页内容,获取图片资源时,一般都是直接解析页面HTML源码,从中获取<img>标签,读取src属性。如果网页用的延迟加载js库不直接设置图片的src属性(通常是设置到一个自定义属性上,然后再需要时在赋给src),那么搜索引擎就无法获取到图片资源,从而影响对页面的评级和收录。

要做到既实现延迟加载,又满足对搜索引擎友好,意味着必须显示写明img标签的src属性,然后在浏览器读取src属性前去除src值,使浏览器在页面加载后不请求图片,再在条件满足时在重新为src赋值,使浏览器发起请求。

具体实现思路:

页面创建<img>标签时按正常用法即可,在html文档的末尾,</html>前写javascript代码,遍历页面中所有<img>标签,为img自定义一个临时属性,将src值赋给这个临时属性(暂且叫偷梁换柱),然后将src清空。这样,浏览器加载完页面,也不会请求图片了。因为浏览器会逐行初始化HTML标签,遇到script时也会立即执行,在初始化</html>后才会确定并请求最终要加载的资源

除了“偷梁换柱”,还要给滚动条添加监听事件,当发生滚动且停止时,判断图片顶边与body顶边的距离(img.offsetTop),如果距离小于body可见区域高度(document.body.clientHeight),说明图片已经进入视野,此时既需要浏览器加载图片,此时再将之前自定义的临时属性的值重新赋值给src即可。

时间: 2024-10-13 15:23:48

对搜索引擎友好的图片延迟加载技术的相关文章

Jquery.ScrollLoading图片延迟加载技术

关于分屏加载图片,像天猫.京东等电商图片较多页面很长,就采用了延迟加载技术. 目前很流行的做法就是滚动动态加载,显示屏幕之外的图片默认是不加载的, 随着页面的滚动,显示区域图片才被动态加载. 原理其实很简单,默认<img>标签中设置一个特别小的让人看不见的图片作为原始src路径, 再自定义一个属性存放原图片路径,通过绑定滚动事件,检查当前元素是否在浏览器窗口中, 然后替换src路径动态加载图片. 找了几个jquery插件都不太好用,kissy没用明白. 最后发现了一个大神写的jQuery滚动加

使用jquery插件实现图片延迟加载技术(懒加载)

有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较长的页面来说,这个方案是比较好的. 这里推荐使用jquery图片延迟加载插件jquery.lazyload实现图片延迟加载提高网站打开速度 下载地址:http://www.appelsiini.net/download/jquery.lazyload.js 修正版:jquery.lazyloa

Jquery 图片延迟加载技术

参考网址:http://code.ciaoca.com/jquery/lazyload/ 延迟加载能大大增加你网站的加载速度! 需要引入以下文件<Jq文件也是少不了的>: <script src="~/Content/demo/jquery.lazyload.js"></script> <script src="~/Content/demo/jquery.lazyload.min.js"></script>

js图片延迟加载

http://stylechen.com/imglazyload2.html [译]页面加载中的图片性能优化 2013年05月26日 吴 天豪 性能优化  原文地址:http://www.stevesouders.com/blog/2013/04/26/i/ 我的大部分性能优化工作都集中在JavaScript和CSS上,从早期的Move Scripts to the Bottom和Put Stylesheets at the Top规则.为了强调这些规则的重要性,我甚至说过,"JS和CSS是页面

关于图片延迟加载的解决方案(针对移动端)

在页面上图片比较多的时候,为了优化性能,可以采用延迟加载技术,我封装了一款轻量级的插件. 插件下载地址: http://pan.baidu.com/s/1o6804Gy 使用方法: 1 在页面中需要引入echo.css和echo.min.js 2 对需要进行延迟加载的图片采用如下写法: <img src="blank.gif" style="width:300px;height:300px;" data-echo="test.jpg" /&

几种垂直居中的方式及CSS图片替换技术

由于块级元素的高度是可以设置的,所以对于块级元素的垂直居中比较简单. 方法一: 在不定高的情况下,把元素的上下内边距设为同一个值即可实现,即padding :10px   0; 以上方法针对块级元素和行内元素都可以. 方法二: line-height:(只针对行内元素可行) 将行高设置成和父元素的高度相等,就可以实现行内元素的垂直居中了. 由于行内元素的对其方式是基线对齐,所以当图片和文字位于一列时,呈现出来的效果往往不是我们想要看到的样子, 我们要想将里面的元素都实现垂直居中,就应该分别对每个

前端图片延迟加载详细讲解

显示在浏览器可视区域的图片总是不能及时的刷出来,让在可视区域的图片立即加载进来,而让不在可视区域并且需要通过滚动条进行滚动显示的图片在图片滚动到可视区域内再显示出来 前端页面的用户体验对于一个网站来说是至关重要的,我们在访问一些图片量比较大的网站的时候,往往会有这样的感受:显示在我电脑屏幕可视区域的图片总是不能及时的刷出来,这就造成了对于一些没有什么耐心的用户而言,他们就不愿意多等下去,索性直接关闭了网站去看其他的网站,这就使得本网站的用户量的流失,这往往是一个网站最不愿意看到的情况,那么对于这

[转载]图片延迟加载库Layzr——nodejs中间件系列

从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎.chrome浏览器就基于V8,同时打开20-30个网页都很流畅.Nodejs标准的web开发框架Express,可以帮助我们迅速建立web站点,比起PHP的开发效率更高,而且学习曲线更低.非常适合小型网站,个性化网站,我们自己的Geek网站!! 关于作者 张丹(Conan), 创业者,程序员(Java,R,Jav

图片延迟加载库Layzr

前言 延迟加载技术,普遍应用于现在大部分的互联网的Web应用上.通过对图像的延迟加载,等到用户浏览区域接近时才把图片进行加载,可以有效地提升网页打开的速度,进一步改进用户的体验. Layzr.js库就可以完成这个功能,150多行代码,很小很快很方便. 目录 layzr介绍 layzr的基本使用 Layzr的配置 整体文章:http://blog.fens.me/nodejs-layzr/