Don’t load hidden images

I have a bunch of hidden images on my website. Their container DIVs have style=”display: none”. Depending on the user’s actions, some images may be revealed via javascript. The problem is that all my images are loaded upon opening the page. I would like to put less strain on the server by only loading images that eventually become …

via Css Website development » Search Results » ajax:

Don’t load hidden images

I have a bunch of hidden images on my website. Their container DIVs have style=”display: none”. Depending on the user’s actions, some images may be revealed via javascript. The problem is that all my images are loaded upon opening the page. I would like to put less strain on the server by only loading images that eventually become visible. I was wondering if there was a pure CSS way to do this. Here are two hacky/complicated ways I am currently doing it. As you can see, it’s not clean code.

.reveal .img
background-image: url(flower.png);

$(‘hiddenDiv’).addClassName(‘reveal’);Here is method 2:

function revealImage(id)
$(‘id’).writeAttribute(
‘src’,
$(‘id’).readAttribute(‘fakeSrc’)
);

revealImage(‘flower’);
…………………………………….

Here’s a jQuery solution:
$(function ()
$(“img”).not(“:visible”).each(function ()
$(this).data(“src”, this.src);
this.src = “”;
);

var reveal = function (selector)
var img = $(selector);
img[0].src = img.data(“src”);

});It’s similar to your solution, except it doesn’t use the fakeSrc attribute in the markup. It clears the src attribute to stop it from loading and stores it elsewhere. Once you are ready to show the image, you use the reveal function much like you do in your solution. I apologize if you do not use jQuery, but the process should be transferable to whichever framework (if any) that you use.
Note: This code specifically must be ran before the window has fired the load event but after the DOM has been loaded.
…………………………………….

It partially depends on how your images must be placed in your code. Are you able to display the images as the background of a

, or are you required to use the tag? If you need the tag, you may be screwed depending on the browser being used. Some browsers are smart enough to recognize when an image is inside of a hidden object or in an object of 0 width/height and not load it since it’s essentially invisible, anyway. For this reason many people will suggest putting an image in a 1×1 pixel if you want the image to be pre-loaded but not visible.
If you don’t require the tag, most browsers won’t load images referenced by CSS until the element in question becomes visible.
Mind you that short of using AJAX to download the image there’s no way to be 100% sure the browser won’t pre-load the image anyway. It’s not unbelievable that a browser would want to pre-load anything it assumes may be used later in order to “speed up” the average load times.
…………………………………….

Based on CD Sanchez solution, I made a small plugin:
(function($)

$.fn.reveal = function(options)
return this.each(function()
var img = $(this),
src = img.data(“src”);
src && img.attr(“src”, src).show(options);
);
}

$(function ()
$(“img”).not(“:visible”).each(function ()
$(this).data(“src”, this.src).attr(“src”, “”);
);
});

})(jQuery);Just run .reveal on the image(s) you want to load. Check jsFiddle
…………………………………….

Using CSS to put the image an unused class, then adding that class to an element with javascript is going to be your best bet. If you don’t use image tags at all, this solution becomes a bit more obvious.
Though, for perspective, most people have the opposite problem where they want to preload an image so it shows up instantly when it’s told to be shown.

For more info: Don’t load hidden images

Css Website development » Search Results » ajax

Don’t load hidden images

Share this post:

Related Posts

Leave a Comment