I've been looking at Javascript that can change the src of an image. I'm simply wondering if this can be done before the browser attempts to fetch the original image.
Example.
Src="Large-Image"
Can I (with javascript, I would imagine.. node.JS maybe?) serve the user src="smaller-image"?
Obviously, there would be no performance gain if the browser loads the large image first.
I've been looking at Javascript that can change the src of an image. I'm simply wondering if this can be done before the browser attempts to fetch the original image.
Example.
Src="Large-Image"
Can I (with javascript, I would imagine.. node.JS maybe?) serve the user src="smaller-image"?
Obviously, there would be no performance gain if the browser loads the large image first.
Share Improve this question asked Oct 2, 2014 at 10:57 David SigleyDavid Sigley 1,1982 gold badges14 silver badges31 bronze badges 1- 1 I'm confused - you mention node.js here, but in a comment on an answer you say "a server side solution is out of the question", which would exclude node.js. This seems to have a bit of an XY problem to it... what is the core problem that you are trying to solve with the solution you are asking about here? – user289086 Commented Oct 2, 2014 at 15:05
5 Answers
Reset to default 9I don't think so, JS needs the image-tag to be available to access the attributes, so it has to execute later than that (Like on a documentReady or by being placed after the tag), but at that point the browser has already started downloading the image.
However, I have seen solutions where you don't set the url on the "src" attribute, but on another attribute name, like "data-src". Your Javascript can dynamically set that url to the "src" attribute to prompt the browser to start downloading.
For example (assuming jQuery is loaded):
<img data-src="http://www.url.nl/image.png" />
<script>
$("img").each(function (index, element) {
var $element = $(element);
var imageUrl = $element.attr("data-src");
//Do your checks here to change the image-url to a smaller one when required
$element.attr("src", imageUrl);
});
</script>
Well, I am a little late to the party... But yeah, of course you can!
The trick is to do EXACTLY what everyone warns you "not to do" and reference your JS file in the <head> section of your webpage. This way, your JavaScript loads before anything else.
Then use document.addEventListener('DOMContentLoaded', ()=> {...}); to grab your image element, as soon as the DOM is available (but before the image file is loaded).
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<script src="main.js"></script>
</head>
<body>
<img src="original_image_URL">
</body>
</html>
and here is main.js which goes with it:
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('img').src = 'new_image_URL';
});
Have fun!
Simple solution, not overly elegant by any means. Call your function to change the image's source with the onload event.
<img id="YourID" src="PathToFirstImage" onload="YourFunction()">
Though this changes the image after it has loaded as long as the viewing browser isn't going insanely slow your audience should never even see the original image.
If I understand jquery ready function correctly, ready, you should be able to achive what you want.
"The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code"
On the other hand load, says
"In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the load event instead."
So according to the docs ready is called before images are loaded, but if you can block downloading and change image paths can only a test answer.
You may be able to do it but not reliably and you can't leave the src blank if you want to output valid markup so would probably hurt mobile performance more than it helps.
Rather than reinvent the wheel there are a number of client and server side ways to do it that don't rely on JS (which you cannot guarantee will be enabled). All of them would be more reliable and are standards compliant (CSS media targeting for example) which would give you better results.