为了最大限度地提高移动设备的效率,我宁愿没有用于桌面版本的图像。通过研究,我了解到简单地使用 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" />
最佳答案
当需要这种级别的优化时,通常的做法是通过 CSS 使用图像作为背景图像。移动浏览器只会加载适用于它的 CSS。
CSS
<style>
@media (max-width:600px) {
.image {
display:none;
}
}
@media (min-width:601px) {
.image {
background-image: url(http://www.example.com/wp-content/uploads/2013/05/img.jpg);
width:700px;
height:350px;
}
}
</style>
HTML
<div class="image">
</div>
关于javascript - 防止图像在移动设备上加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18858001/