Javascript 没有为jQuery函数及时加载DOM元素（jQuery滑块演化）

我知道在对dom元素使用jQuery之前，最好将代码包含在$document.ready中

我在这里问的最后一个问题是，我试图通过选择图像大小并将小部件设置为该大小来调整自定义jQuery小部件的大小。问题是，jQuery代码无法及时加载映像以选择并使用它。我最终用$image1.load解决了这个问题

我面临的新问题来自这样一个事实，即jQuery小部件不会像图像本身那样随窗口调整大小。我正在使用此代码进行重新调整

$(window).resize(function () {
        var imageWidth = $(window).width()

        $(".slider").width(imageWidth);

        $("#image1").width(imageWidth);

        $("#image2").width(imageWidth);
    });

守则有效；然而，每隔一段时间，在页面初始加载时，图像不会及时加载，我只能看到小部件本身。我能够看到导航控件，它表明确实有两张照片，只是照片没有显示，小部件看起来好像处于折叠状态

以下是该页面的完整代码

<section class="featured">
    <div class="slider" style="width: 100%">
        <div class="slider-image">
            <img id="image1" src="~/Content/images/NSXBanner.jpg" />
        </div>
        <div class="slider-image">
            <img id="image2" src="~/Content/images/civicBanner.jpg" />
        </div>
    </div>
</section>

<script type="text/javascript">
$(document).ready(function () {

    /*This resizes the slider widget and animations along with the window size changed event*/
    $(window).resize(function () {
        var imageWidth = $(window).width()

        $(".slider").width(imageWidth);

        $("#image1").width(imageWidth);

        $("#image2").width(imageWidth);
    });

    $('#image1').load(function () {
        var imageWidth = $('#slider').width()
        var imageHeight = $('#image1').height()

        $(".slider").slideshow({
            width: imageWidth,
            height: imageHeight,
            transition: 'bar'
        });
    });
});

---

您是否可以在前面设置图像宽度和高度？-因为浏览器将在下载/渲染之前为其分配空间。除此之外，请通过移动$window来尝试。调整大小。。函数在$'image1'中。加载。。功能目前我的图像使用宽度：100%；高度：自动；。我会尝试两种方法，但我不确定设置静态尺寸是否合适，因为我的图像在较小的屏幕上可能看起来非常巨大。如果您是宽度：100%，高度：自动，则同意，而不是点设置内联尺寸。可以将重定尺寸代码移动到图像上。加载部分似乎起到了作用。我认为这样做可能会在重新调整浏览器大小时阻止重新调整大小的代码运行，因为它位于元素的加载方法中，但事实并非如此。