如果我点击下一个/上一个，如何立即显示从旋转木马到我的第二个div的活动图像？

Question

当我点击下一个/上一个时，我在显示从旋转木马到我的第二个div的活动图像时出现问题。当我点击下一个/上一个时，看起来它会延迟。

function strapActiveImage() {
        var activeElImgSrc = document.querySelector('div#strap_carousel>div.carousel-inner>.carousel-item.active > img').getAttribute('src');
        document.getElementById('strap_logo').src = activeElImgSrc;
        document.getElementById('strap_logo2').src = activeElImgSrc;

    }

    <!-- STRAP -->
    <div class="justify-content-center body-inner">
        <div class="personalize-item-title left-align bold">
            <span>STRAP</span>
        </div>
        <!-- CarouselBegin -->
        <div id="strap_carousel" data-interval="false" class="carousel" data-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="stap_design/strap_1.png" class="personalize-left-strap margin-top">
                </div>
                <div class="carousel-item">
                    <img src="stap_design/strap_2.png" class="personalize-left-strap margin-top">
                </div>
            </div>
            <a class="carousel-control-prev" href="#strap_carousel" role="button" onclick="strapActiveImage()" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#strap_carousel" onclick="strapActiveImage()" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
            </a>
        </div>
        <span>LEATHER</span>
        <!-- CarouselEnd-->
    </div>
    <!-- STRAP END -->
<div class="justify-content-center body-inner">
    <img src = "stap_design/strap_1.png" class="strap_display" id="strap_logo">
    <img src="stap_design/strap_1.png" class="strap_display2" id="strap_logo2">
</div>

Answer 1

为了那些正在寻找像这样的问题/问题的答案的人的利益，我能够通过向图像标签添加onload =“strapActiveImage（）”来解决我自己的问题（显示正在发生） ）。这是代码：

function strapActiveImage() {
        var activeElImgSrc = document.querySelector('div#strap_carousel>div.carousel-inner>.carousel-item.active > img').getAttribute('src');
        document.getElementById('strap_logo').src = activeElImgSrc;
        document.getElementById('strap_logo2').src = activeElImgSrc;

    }

    <!-- STRAP -->
    <div class="justify-content-center body-inner">
        <div class="personalize-item-title left-align bold">
            <span>STRAP</span>
        </div>
        <!-- CarouselBegin -->
        <div id="strap_carousel" data-interval="false" class="carousel" data-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="stap_design/strap_1.png" class="personalize-left-strap margin-top">
                </div>
                <div class="carousel-item">
                    <img src="stap_design/strap_2.png" class="personalize-left-strap margin-top">
                </div>
            </div>
            <a class="carousel-control-prev" href="#strap_carousel" role="button" onclick="strapActiveImage()" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#strap_carousel" onclick="strapActiveImage()" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
            </a>
        </div>
        <span>LEATHER</span>
        <!-- CarouselEnd-->
    </div>
    <!-- STRAP END -->
<div class="justify-content-center body-inner">
    <img src = "stap_design/strap_1.png" class="strap_display" id="strap_logo" onload="strapActiveImage()">
    <img src="stap_design/strap_1.png" class="strap_display2" id="strap_logo2" onload="strapActiveImage()">
</div>