improve search for a div attributte every hover event with jquery

Question

I have several divs like:

<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>

Also Ihave a jquery that depending on div, it searches a efect "right,left,bottom,top" to apply to div, then searches the type of gal, and changes the image it has as a value for other image stored in corresponding array

So, I think to improve the code, I would make a dictionary with the values for each div, instead of applying

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

every time the user is hovering...

Is there a way to improve the code, also i was wondering is it good to wait till all images are loaded or something? here is the fiddle

Answer 1

You can load the images on loading by put the images in a div and set the prop of the div in css to: position: absolute; left: -5000px;

HTML:

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

Css:

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

And there alot other way to: you can catch all img with Jquery and put them in the div when dom is ready