jquery 防止图像加载到移动的设备上

bq8i3lrv  于 2023-11-17  发布在  jQuery
关注(0)|答案(4)|浏览(107)

为了最大限度地提高移动的设备的效率,我宁愿没有用于桌面版本的图像。通过研究,我了解到,简单地使用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" />

8mmmxcuj

8mmmxcuj1#

当需要这种级别的优化时,通常的做法是通过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>

cgyqldqp

cgyqldqp2#

有多种方法可以做到这一点。我个人喜欢他们在这里使用的技术:http://adaptive-images.com/
它使您的代码简单,HTML语义正确
你也可以写自己的js解决方案。
你的HTML可能看起来像这样:

<img alt='some image' src='blank.gif' data-src-mobile='my-mobile-version.jpg' data-src-desktop='my-desktop-version.jpg />

字符串
blank.gif将是一个1 px的透明gif,使用JavaScript你可以检测移动的上的天气,然后用合适的data-src属性替换src属性。
这应该是一个简单的解决方案,但它需要你的js在图片开始加载之前运行,从技术上讲,它在语义上是不正确的。

fivyi3re

fivyi3re3#

为了防止图像加载,您可以使用remove()对象函数从代码中删除img标记:

$('img').remove();

字符串
或者你可以删除src属性,注意:它们有自己的CSS值,如width和height,如果定义的话,并且在代码中有它们的位置:

$('img').removeAttr('src');

stszievb

stszievb4#

要确保图像只在桌面设备上加载而不在移动的设备上加载,您可以使用HTML元素并将其与媒体查询结合起来。该元素允许您为图像定义多个来源,浏览器将根据媒体查询和设备的功能选择最合适的来源。
下面是如何修改代码来实现这一点:

<div class="image_holder">
    <picture>
        <source media="(min-width: 768px)" srcset="assets/images/background/bg_0.avif">
        <!-- The img tag below is a fallback and will use the source defined above if the media query matches -->
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Overflow Image">
    </picture>
</div>

字符串
事情是这样的:
具有media="(min-width: 768px)"属性的元素告诉浏览器仅当视口宽度为768像素或更大时才使用bg_0.avif图像(通常是桌面屏幕)。标签作为后备。如果元素中的媒体查询都不匹配,浏览器将使用标签中指定的图像。在这种情况下,我们使用一个微小的透明GIF作为占位符,因此没有实际的图像被加载到移动的设备上。
这样,图像只加载在桌面设备上,而移动的设备不会加载它,从而节省了资源。

相关问题