使用 Javascript/JQuery 的媒体查询 - 根据屏幕大小更改图像答案

【问题标题】：Media Query using Javascript/JQuery - Changing image depending on screen size使用 Javascript/JQuery 的媒体查询 - 根据屏幕大小更改图像
【发布时间】：2018-05-07 20:39:06
【问题描述】：

我已经研究了一个解决方案来根据屏幕大小更改 src 的值，但不知何故，即使我调整浏览器的大小，它也只会显示第一张图像 (../assets/img/features/cleardent-header. .png)。我希望它在屏幕尺寸小于 991 时更改为 (../assets/img/features/cleardent-header-small.png。

我一直在考虑使用 CSS，但由于它在轮播中，所以有点复杂。谁能给我一个建议？

这是我的轮播第一张幻灯片的 HTML：

<div class="item active"> <img id="first-slide" class="first-slide" alt="First slide"> 
    <!--slogan and CTA-->
    <div class="container carousel-caption main-slider">
        <div class="row header-slogan fadeInDown animated">
            <div class="col-xs-12">
                <section class="cd-intro">
                    <h1 class="cd-headline letters type"><span>Do everything.</span> <span class="cd-words-wrapper ahwaiting"><b class="is-visible">Better.</b><b class="colour-cleardent">with ClearDent</b></span></h1>
                </section>
            </div>
        </div>
        <div class="row header-tagline fadeInDown animated">
            <div class="col-xs-12">
                <p>A complete dental practice management program that you are going to <span class="colour-cleardent-sec">love</span></p>
            </div>
        </div>
        <div class="row header-cta fadeInUp animated">
            <div class="col-xs-12">
                <button class="btn-u extra-demo-btns" onClick="window.location='../demo';"><i class="fa fa-paper-plane fa-fw"></i> Book a Demo</button>
                &nbsp; <a href="https://player.vimeo.com/video/157093017" class="btn-u fancybox-media fbmloading" id="cleardent-page-header-2-vimeo" data-fancybox-title="Why ClearDent?"><i class="fa fa-play fa-fw"></i> Watch a Video</a> 
            </div>
        </div>
    </div>
    <!--slogan and CTA end--> 
</div>

这是我的 jQuery：

      <script>
  $(document).ready(function() {
     if($(window).width() > 991) {
         $("#first-slide").attr("src", "../assets/img/features/cleardent-header.png");
     } else {
         $("#first-slide").attr("src", "../assets/img/features/cleardent-header-small.png");
     }
}); 
  </script>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您的代码适用于 DOM 的初始加载，但是一旦文档加载并且用户调整浏览器窗口的大小，它就没有影响，您需要将处理程序连接到 window.resize 事件以在窗口大小时发出警报更改，然后执行相同的逻辑：

//Place this in your document ready
$(window).resize(function() {
     if($(window).width() > 991) {
         $("#first-slide").attr("src", "../assets/img/features/cleardent-header.png");
     } else {
         $("#first-slide").attr("src", "../assets/img/features/cleardent-header-small.png");
     }
});

【讨论】：

很遗憾，使用此解决方案，图像在页面初始加载时会出现损坏。
图片只有在调整大小后才会出现（例如拖动浏览器宽度）
不，这会将处理程序附加到 window.resize 事件，您仍然可以在文档中准备好初始代码，但也可以将这段代码添加到其中。
我是新手，我很困惑。那么我是否将它们附加到我的文档就绪函数中，但我必须删除以前的窗口调整大小代码对吗？

【解决方案2】：

srcset怎么样？

<img src="../assets/img/features/cleardent-header-small.png" srcset="../assets/img/features/cleardent-header.png 991w, evenLargerImage.jpg 2000w">

【讨论】：