wordpress去掉评论响应式图片srcset属性

今天去掉了一下wordpress评论图片srcset属性,可能有的小伙伴会问什么是srcset属性,下面大致讲一下
其目的是为使用不同分辨率的不同浏览器用户提供适合其浏览环境的图片大小的解决方案
以下代码是我的评论里的头像图片的代码

<img alt="" src="5.png" srcset="h25?s=72&amp;d=" class="avatar avatar-36 photo" height="36" width="36">

低分辨率的显示屏上显示的默认图片即src属性里的图片,或者没有办法识别srcset属性的浏览器也会显示默认图片
而srcset中指定的图片,则会在能识别srcset属性的浏览器中同时是高分辨率屏幕中显示
于是我发现【留下脚印】头像加载很慢原因是加载的头像图像太多了,默认加载完src的图片还会加载srcset属性的图片,于是决定去掉srcset属性,我个人感觉没有必要
修改主题function.php文件

在原来修改头像路径的代码

function dmeng_get_https_avatar($avatar){
  $avatar = str_replace(array("www.gravatar.com", "0.gravatar.com", "1.gravatar.com", "2.gravatar.com"), "gravatar.duoshuo.com", $avatar);
  return $avatar;
}
add_filter('get_avatar', 'dmeng_get_https_avatar');

修改成

function dmeng_get_https_avatar($avatar){
  $avatar = str_replace(array("www.gravatar.com", "0.gravatar.com",   "1.gravatar.com", "2.gravatar.com"), "gravatar.duoshuo.com", $avatar);
  $avatar = preg_replace(array('/srcset=(\'|")(.*)(\'|")/isU'),array(''),$avatar);
  return $avatar;
}
add_filter('get_avatar', 'dmeng_get_https_avatar');
搞定了

时间: 2024-09-15 23:16:18

wordpress去掉评论响应式图片srcset属性的相关文章

使用srcset实现响应式图片 sizes属性

图片要在各种设备上平滑过渡显示,它们将会碰到的问题有:1.适当的优化和减少图片的体积:2.注意不要浪费带宽(网站的成败与否加载速度是其中主要因素之一):3.设备使用相应的解决方案. 对于第一个问题,使用TinyPng和JPEGmini工具可以帮助减少图片的体积和优化图片. 对于第二个问题,在一些场合下我们可能要使用到强大的媒体查询.多亏了有他们,我们可以很简单的处理背景图片的问题.但是,有些地方使用的是img来显示图片,这也是我们要解决的第三个问题,也是最后一个问题,如何根据设备的分辨率调用合适

Web开发中的响应式图片处理

目前手机等移动设备网站开发已经有比较好的解决方案,一种是响应式网站,像笔者博客一样,PC网站就是移动网站,一种是把移动网站和PC网站分开,类似淘宝那样.从网站SEO的角度来说,两者并无差别,也各有利弊,不论采取那种方式也都能解决移动设备浏览问题.随着移动设备和类型越来越多,我们几乎不太可能针对某一类设备建设单独的网站,不论PC网站和移动网是否分开建设,那都意味着我们的移动网站将会面临越来越多各不相同设备进行访问,也就是说即使是建设单独的移动网站,我们也必须要考虑网站符合用户的设备特性. 一般来说

【转】CSS 与 HTML5 响应式图片

关于响应式的,近来国内外也不断提到,还是目前比较流行的技术话题,这篇文章来至淘宝UED的,讲得是响应式图片,写得很不错.  随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变这种现状.那么到底什么是响应式图片呢? 什么是响应式图片? 响应式图片是指:用户代理根据输出设备的分辨率不同加载不同类型的图片,不会造成带宽的浪费.同时,在改变输出设备类型或分

CSS 与 HTML5 响应式图片

随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变这种现状.那么到底什么是响应式图片呢? 什么是响应式图片? 响应式图片是指:用户代理根据输出设备的分辨率不同加载不同类型的图片,不会造成带宽的浪费.同时,在改变输出设备类型或分辨率时,能及时加载对应类型的图片. CSS3 响应式图片 对于很多 IOS 开发者来说可能已经不太陌生了,为了适配 Reti

Chrome 34 Beta版的语音搜索和响应式图片支持

Chrome 33稳定版发布才过了一周,Google就宣布了Chrome 34 beta for Windows.Mac.以及Linux.Chrome 34 beta的新功能包括--支持响应式图片.unprefixed版本的Web Audio API.以及"OK Google"语音搜索.当然,人们最感兴趣的,应该都是后者--只需在Chrome中新建标签页或访问Google.com,再说一句"OK Google",浏览器就会自动提取语音关键词并进行搜索了. 该功能已登

jquery.gridrotator实现响应式图片展示画廊效果

本教程将教大家制作一个jQuery响应式图片展示画廊效果,所有图片以网格的形式排列,然后定时随机翻转其中某些格子用来切换图片.这种效果可以用来当做背景或装饰放在我们的网站上.       jquery.gridrotator是一款非常实用的响应式图片展示画廊插件.这款图片展示画廊插件将图片像网格一样排列,然后随机将某个格子中的图片翻转显示另一张图片.共有6种效果. HTML结构: HTML结构非常简单. ? 1 2 3 4 5 6 7 <div id="ri-grid" clas

jquery.gridrotator实现响应式图片展示画廊效果_jquery

 jquery.gridrotator是一款非常实用的响应式图片展示画廊插件.这款图片展示画廊插件将图片像网格一样排列,然后随机将某个格子中的图片翻转显示另一张图片.共有6种效果. HTML结构: HTML结构非常简单. <div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow"> <ul> <li><a href="#"><img s

Bootstrap实现圆角、圆形头像和响应式图片_javascript技巧

Bootstrap提供了四种用于<img>类的样式,分别是: .img-rounded:圆角 (IE8 不支持),添加 border-radius:6px 来获得图片圆角:.img-circle:圆形 (IE8 不支持),添加 border-radius:50% 来让整个图片变成圆形..img-thumbnail:缩略图功能,添加一些内边距(padding)和一个灰色的边框..img-responsive:图片响应式 (将很好地扩展到父元素). 使用: 将类样式直接添加到class中即可:&l

浅谈CSS响应式图片运用中的srcset属性

  介绍 在整个网站的开发中,在管理图片上较为困难.注意,图片要在各种设备上平滑过渡显示,它们将会碰到的问题有: 适当的优化和减少图片的体积 注意不要浪费带宽(网站的成败与否加载速度是其中主要因素之一) 设备使用相应的解决方案 对于第一个问题,使用TinyPng和JPEGmini工具可以帮助减少图片的体积和优化图片. 对于第二个问题,在一些场合下我们可能要使用到强大的媒体查询.多亏了有他们,我们可以很简单的处理背景图片的问题.但是,有些地方使用的是img来显示图片,这也是我们要解决的第三个问题,