The other day I was handed a design for a large navigation menu with images. An image would show when a user hovered over the individual menu item - a pretty common navigation UI.
My biggest concern was how to load these images only when the visitor required them, especially because they are not visible to the user unless she engages with the navigation, which may not happen all the time.
The problem - the navigation contains a large amount of images, which may impact site load time.
The solution - only load a navigation image when user hovers over the associated menu item.
The technique - on hover, replace a
span tag with an
img tag and copy the attributes over.
I've created a
span element with a custom attribute named
data-original, which contains the path to my image.
<div class="container"> <h1 class="trigger">Hover over me to fetch an image</h1> <span data-original="http://www.fillmurray.com/200/200"> </div>
I have an event listener for the
.trigger class that will do a quick search and replace, copying what I have in the
data-original to the
I have a red box that is the
span tag. Once you hover over the box, the JS fires and loads the image.
From what I understand, we shouldn't get penalized since the DOM intially reads as a
span tag. I was orginally going to use an
img tag and just swap out attributes, but was concerned about search engines penalizing me for having an
img tag without a