Postpone loading an image that is not visible on initial view - javascript

I am trying to figure out how to optimize a duplication of an image. Basically I have the same image in four different sections. However, the sections are controlled with toggle tabs, so only one shows at a time.
Is there a way for the browser to not load the image until the tab is clicked or for the browser to load the image once, rather than four times and then to just echo it?
I thought of doing something just like the following and then echoing it, but won't the image still load four times?:
$target = '<img src="../images/target.jpg" ';
I am fine with the image loading multiple times, but not on page load, to allow for reducing the initial page load for the user.
If this is confusion at all, please ask for more information.

A Useful Tutorial And Explanation
The same image will only get loaded once, the browsers doesn't load an image anew every single time the source gets mentioned, even when the alt is different
PHP
With PHP you can only influence what HTML is send to the browser. But, you want the browser to load your image after the rest of the page. With PHP, you cannot tell te browser to do so, it treats all HTML in the same way.
JS
To do the trick, the image can be loaded in after the page has been loaded. Since the image is not visible yet on the homepage, this does not matter.
To make the browser load in the image afterwards you can give an <img> a fake src and an attribute containing the real source, like so:
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="THE_LINK_TO_YOUR_IMAGE">
data-src now contains the real link to your image.
With the following JS you can then change out the data-src attribute to become the src attribute, after the page has loaded. The image will then load immediately after the page has finished loading:
JS
<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>
The JS should come just before the last body tag, to further decrease loading time.

Related

<img> fails to load image with error GET 0()

SITUATION:
My page has about 500 <img> elements that are dynamically generated and populated with image urls from an API request that refreshes the data once per hour.
PROBLEM:
Every few page loads, a good amount of images fail to load the image with error code 0().
WHAT I TRIED:
I also tried putting all the images directly in one of my website's folders and loading them from there and the same behaviour happens.
Some times all images load without any issue, sometimes a good number of them fail to load.
QUESTION:
How can I make sure the images always load ?
P.S.: I checked the image urls when the images fail to load, the urls are correct.
Screenshot attached.
EDIT:
To be clear, my question has most likely nothing to do with the requests themselves since the image urls are properly loaded inside the <img> tags, it's the images that fail to load, not the urls.
It might be difficult to figure out why some images sometimes fail to load. One strategy could be to check if all images were loaded.
See: Is it possible to reload a specific image if it did not finish loading after a preset amount of time? javascript/jquery
Here's the sample code from the accepted answer that should work for your scenario:
var images = $('img'); // Get all images. (you'll want to modify the selector
// to work with only the desired images)
images.load(function() { // Add a load event hander that removes
images = images.not(this); // each image from images once loaded.
});
setTimeout(function(){ // After 10 seconds, iterate over each remaining
images.each(function() { // image, reloading each one
// reload this image
});
},10000); // run after 10 seconds

Preloading images in Firefox aren't being retrieved from the cache on the same page load

Some context, I am running a script on a website's home page to swap background images on a timer. We decided it would be better to attempt to implement preloading of the images, which prompts the following issue in Firefox:
Preloading images on the first page load will not prevent the browser from loading the image from the original source again instead of the cache. Oddly though, refreshing the page will successfully cause the image to be loaded in from the cache.
The JavaScript that runs on page load takes all of the image URLs, and attempts to preload them via calling (new Image()).src = 'http:// ...'; for each one.
Inspecting the page load revealed that the images would be loaded in on page load, but then the image would also be loaded in again when the slide was revealed.
Test Image Link (SO reputation restrictions): http://i.stack.imgur.com/E9KLM.png
In the image, the images -66.png, -21.png, -63.png, and -83.png were preloaded from the JavaScript, but are then requested again when the slider reveals that slide.
What's also strange is that the bottom images look like they were queued to be loading in since the page was created. Maybe it's because this takes priority over the script that was loaded once the document was ready?
To finish off, if I was to refresh the page and jump to a slide that was preloaded with the images, but never revealed, it is shown to be loaded from the cache like it should have been originally.
My theory is that the original background images are maybe declared to needing to be loaded from the server when the page is first loaded, but aren't actually loaded until the slide is revealed. On document ready, when the javascript preloads the images, they're not cached yet so they need to be loaded from the server. Then a slide is revealed and the browser tells that image that it needs to be loaded as originally declared.
Does anyone know why this situation is occuring? If so, are there any solutions to resolve?
I have an idea that involves adding the image URLs as a data-url attribute instead, and then having javascript preload them and add them as background images at that point, but I haven't tested this yet.
For those interested, we were not able to find a perfect solution for this.
What we did notice, however, is that the images were being pulled again based on their size. The larger the image size, the more likely the image was not fetched from the cache when the image was shown to the user.
We semi-resolved this issue by compressing our background images even further, and then greatly limiting the amount of images preloaded on the first page load. We found that these two steps greatly increased the changes of the images being pulled in through the cache when needed. It also saved more bandwidth and improved page loading times in general by a significant amount.

loading web page images after the page is loaded

In my website (that is for baby names), 40 names are shown in each pages, and each name can have a picture that are uploaded by users.
now that number of names with pictures has increased my pages are very slow. by the way images are loaded from CDN and my concern is only for client side page load time.
first I decided to to put a 1x1 empty gif image as src and load actual images after the page load completes
<img src="x.gif" data-src="the-real-image-src.jpg" class="delayed-load" />
$(window).load(function () {
$('.delayed-load').each(function(){
$(this).attr('src',$(this).data('src'));
});
});
but later I thought that as Images are being indexed by search engines it will have a bad influence on it. so I decided not to change real srcs and just cancel loading images before they start and retry loadin after page loaded. as I researched canceling image load doesn't prevent browser download te image so this one failed too.
I can add Images after page load too but it has the same problem as the first choice (that page source doesn't contain real image links.
what would you suggest to keep it both search engine friendly and also load images after page completion?
Add a width="<value>" and height="<value>" to your img tags (in pixels). This will allow the page text content to render before the images are fully loaded. No javascript required.
<img src="x.gif" width="42" height="60" data-src="the-real-image-src.jpg" />
Note that I assume either you have the same width and height for each image, or you've stored the metric somewhere you can access it on this load.

HTML video starts to download after several other images on the page have finished downloading

Sometimes the HTML video on the topmost portion of my site doesn't run when user is visiting the site for the first time. This is due to the movie being loaded long after the other images files on the page have been downloaded. Until that point the request for the resource is not being sent as I can see through firebug's net extension.
Since the video is on the top of other images I want it to be downloaded first & quicker. In my HTML code as well, video is placed before the other images so why is the downloading of movie blocked for such long times ?
How should I fix this to make the movie load faster?
The movie size(of .mp4 version) is around 600Kb for 30 seconds.
I can see two possible solutions to your problem:
a) Use CSS background-image on an inline-block DIV instead of <img> elements. Background loading is run on lower priority thread(s) on almost all browsers. This way your video loading is very likely to get more priority.
b) In your <img> tags, do not specify the src attribute. Instead specify the image source in another attribute, say isrc. In your domReady callback, copy the isrc attribute to src for all images. i.e. something like:
$(document).ready(function() {
$('img').each(function() {
if($(this).attr('isrc')) {
$(this).attr('src', $(this).attr('isrc'));
}
});
});

Why does a JS preload appear to take longer than a regular image reference to load?

I have a bunch of images that I am preloading inside of a loop. One of
these images is also loaded by the html, so I get a good look at how
these two different methods perform. For measurement, I am using the
Network pane of the Safari Web Inspector, after clearing the cache.
The ClownFish image is 280KB, and when referenced by the HTML takes 14ms to
load, while the Aurora image referenced by JS in the preload is
116KB and takes 77ms to load.
var images = ['Aurora', 'ClownFish', 'DewDrop', 'EarthHorizon', 'FlowingRock', 'GentleRapids', 'GoldenPalace'];
images.each(function(elm){
var path = elm + '.jpg';
var preload = new Image();
preload.setAttribute('src',path);
});
Is this all overhead from setting up the Image() and then assigning
the src to it? Is there any way to speed this up?
Have you checked if this is also the case in Firefox (using Firebug)? And are those load times how long it takes to retrieve the image itself? Or is it how long from the start of the request until the image is loaded?
If the latter, it could have something to do with where/when the javascript gets loaded on the page, or the browser already has too many requests to the domain the images are on and has to wait until some of those complete before preloading your images.
I'd also be curious to see how long the load times are if you don't preload the images at all. Do you get low load times for all images if they're loaded by the html? If not, then maybe the web server is the issue.

Categories