为了最大限度地提高移动的设备的效率,我宁愿没有用于桌面版本的图像。通过研究,我了解到,简单地使用display:none;
css或jQuery('img').hide()
只会隐藏图像,但仍然使用资源来加载它。
我怎么能接受这个:
<div class="com_router_img">
<img src="http://www.example.com/wp-content/uploads/2013/05/img.jpg"
alt="img" width="700" height="350" class="aligncenter size-full wp-image-307" />
</div>
字符串
而不是在我的移动的样式表上显示它?下面是移动的样式表查询:
<link rel="stylesheet" media='screen and
(-webkit-min-device-pixel-ratio: 1.4) and (-webkit-max-device-pixel-ratio: 1.5)'
href="<?php bloginfo('template_url'); ?>/smallphone.css" />
型
4条答案
按热度按时间8mmmxcuj1#
当需要这种级别的优化时,通常的做法是通过CSS使用图像作为背景图像。移动的浏览器将只加载应用于它的CSS。
CSS
字符串
HTML
型
cgyqldqp2#
有多种方法可以做到这一点。我个人喜欢他们在这里使用的技术:http://adaptive-images.com/
它使您的代码简单,HTML语义正确
你也可以写自己的js解决方案。
你的HTML可能看起来像这样:
字符串
blank.gif将是一个1 px的透明gif,使用JavaScript你可以检测移动的上的天气,然后用合适的data-src属性替换src属性。
这应该是一个简单的解决方案,但它需要你的js在图片开始加载之前运行,从技术上讲,它在语义上是不正确的。
fivyi3re3#
为了防止图像加载,您可以使用
remove()
对象函数从代码中删除img
标记:字符串
或者你可以删除
src
属性,注意:它们有自己的CSS值,如width和height,如果定义的话,并且在代码中有它们的位置:型
stszievb4#
要确保图像只在桌面设备上加载而不在移动的设备上加载,您可以使用HTML元素并将其与媒体查询结合起来。该元素允许您为图像定义多个来源,浏览器将根据媒体查询和设备的功能选择最合适的来源。
下面是如何修改代码来实现这一点:
字符串
事情是这样的:
具有
media="(min-width: 768px)"
属性的元素告诉浏览器仅当视口宽度为768像素或更大时才使用bg_0.avif
图像(通常是桌面屏幕)。标签作为后备。如果元素中的媒体查询都不匹配,浏览器将使用标签中指定的图像。在这种情况下,我们使用一个微小的透明GIF作为占位符,因此没有实际的图像被加载到移动的设备上。这样,图像只加载在桌面设备上,而移动的设备不会加载它,从而节省了资源。