javascript 防止图像加载到移动设备上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18858001/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent image from loading on mobile devices
提问by Chris
To maximize efficiency for mobile devices, I would rather not have images that are used for the desktop version. Through research, I have learned that simply using display:none;css or jQuery('img').hide()will only hide the image, but still use the resources to load it.
为了最大限度地提高移动设备的效率，我宁愿没有用于桌面版本的图像。通过研究，我了解到简单地使用display:none;css或者jQuery('img').hide()只会隐藏图像，但仍然使用资源来加载它。
How can I take this:
我怎么能接受这个：
<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>
And NOT display it on my mobile stylesheet? Here is mobile stylesheet query:
并且不在我的移动样式表上显示它？这是移动样式表查询：
<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" />
回答by Kevin Lynch
It is common practice to use images as background images through CSS when this level of optimisation is required. A mobile browser will only load the CSS that it applies to it.
当需要这种级别的优化时，通常的做法是通过 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
HTML
<div class="image">
</div>
回答by Pevara
There are multiple approaches to this. Personally I like the technique they use here: http://adaptive-images.com/
对此有多种方法。我个人喜欢他们在这里使用的技术：http: //adaptive-images.com/
It keeps your code simple and the HTML semantically correct
它使您的代码简单且 HTML 语义正确
You could also write your own js solution.
您也可以编写自己的 js 解决方案。
Your HTML could look something like this:
您的 HTML 可能如下所示：
<img alt='some image' src='blank.gif' data-src-mobile='my-mobile-version.jpg' data-src-desktop='my-desktop-version.jpg />
The blank.gif would be a 1px transparent gif. With javascript you could detect wether on mobile, and then replace the src atribute with the appropriate data-src attribute.
blank.gif 将是一个 1px 的透明 gif。使用 javascript，您可以在移动设备上检测，然后将 src 属性替换为适当的 data-src 属性。
This should be an easy solution, but it will require your js to ru before the images start loading, and technically speeking it is not semantically correct. Also search engines will have troubles indexing your images.
这应该是一个简单的解决方案，但它需要您的 js 在图像开始加载之前 ru，并且从技术上讲它在语义上是不正确的。搜索引擎也会在索引您的图像时遇到麻烦。
回答by 01e
for preventing images to load, you can use remove()object function to remove imgtags from your code:
为了防止图像加载，您可以使用remove()对象函数img从代码中删除标签：
$('img').remove();
Or you can remove srcattribute, NOTE: they have their CSS values like width and height if defined and have their places in code:
或者你可以删除src属性，注意：如果定义了它们，它们有它们的 CSS 值，如宽度和高度，并且它们在代码中的位置：
$('img').removeAttr('src');
