Question

我有这样的HTML。

<div class='parallax'>
    <div class='slider'>
        <img src='ps1.jpg' alt=''>
        <img src='ps2.jpg' alt=''>
        <img src='ps3.jpg' alt=''>
        <img src='ps4.jpg' alt=''>
        <button id='slider-previous'>
        </button>
        <button id='slider-next'>
        </button>
    </div>
</div>

适用于我要制作的jQuery滑块。 javascript使得无论我添加到<div class='slider'>有多少张图片，我都无需更改。我需要以类似的方式预加载这些图像。我能找到的任何解决方案都有两个问题之一。

它要么预加载了网页上的所有图像，包括<div class='slider'>以外的图像，要么图像的链接必须自定义添加到代码中。

我研究了延迟加载作为替代方法（相对于预加载，我不需要它），但是我可以找到的解决方案包括为图像添加width和height属性。我的div和图像具有以下CSS，这对于我的滑块绝对必要。

.slider, .slider img {

width:100%;
height:auto;
margin:0;
padding:0;

}

我正在寻找类似这样的东西。

$(function() {

$( '.slider' ).children() ..........

//OR

$( '.slider > img' ) ..........

});

有人可以帮忙吗？

如何仅预加载div中的所有图像？

0 个答案: