javascript - 使用 jquery 改进每个悬停事件对 div 属性的搜索

Question

我有几个 div，例如:

<section class="card-container">
    <div class="card over" data-direction="right" gal="gal1">
        <div class="front">
                <h2>yellow flowers</h2>
                <h4>(Right)</h4>
        </div>
        <div class="back">
            <img src="http://images.fanpop.com/images/image_uploads/Flower-Wallpaper-flowers-249398_1693_1413.jpg"
            width="100%;" height="100%;" alt="" />
        </div>
    </div>
</section>

我还有一个 jquery，它依赖于 div，它搜索效果“右、左、下、上”以应用于 div，然后搜索 gal 的类型，并将它具有的图像更改为存储的其他图像的值在相应的数组中

所以，我想改进代码，我会用每个 div 的值制作一个字典，而不是应用

img = $(this).find('img');

每次用户悬停...

有没有办法改进代码，我也想知道等到所有图像都加载好还是什么好？ here is the fiddle

Answer 1

您可以通过将图像放在一个div中并在css中将div的prop设置为:position:absolute;来加载图像。左:-5000px；

HTML:

<div id="allimages"><img 1><img 2> etc.. </div>

CSS:

#allimages {
  postion: absolute;
  left: -5000px;
}

还有很多其他方法可以:你可以用 Jquery 捕获所有 img 并在 dom 准备好时将它们放入 div