Changing src

JavaScript
1

Hey guys. Hope you’re all okey.

I was wondering. When we change the imagesrc onclick from ex. “images/myimage1.jpg” to “images/myimage2.jpg” does this somehow make a trip back to the server to get the image or how does it really work? I Was wondering because it doesn’t cause a pagereload when the image changes, and the image that we are changing to is not preloaded. Everything works fine, just curious how it works behind the scenes when changing src.

We are using these kind of “methods” alot, not just for images. Srcipts, css and so on…

2

Is the script/image/whatever loaded in the sources? No? Then we have to communicate with the server to get it. Just because the page has completed its initial load doesnt mean it cant make additional requests to the server.

2 Likes
3

Allright. So it works like ajax in someway? Because it doesn’t cause a pagereload, it does what it needs to do behind the scenes.

4

Well it doesnt strictly use AJAX, because it’s not Javascript doing the loading - it’s the browser. It’s asynchronous in the sense that your script doesn’t wait around for it to load before continuing (because all the script did was change an attribute, it doesnt know if the browser already has the image to hand or not)

5

Yes. But it doesn’t make a new request to the server. Its like the browser is talking to the server from distance and telling the server to meet him up with the images, instead of going all the way to the server himself :wink:

So thats good. But how can I preload the images to the source as you mentioned and then be sure that if I change the src of any element, it looks directly within “what we already have recived” so it does not make unnecessary checks or new trips to other places?

6

Well, it will always check to see if it has the image. It cant… not-check. And it always ‘makes a trip’ to the server to get the image if it doesn’t have it.

When you load a webpage, the browser doesnt make a single ‘trip’ to the server. It makes many trips, to potentially many servers.

Browser: “I need index.html, YourServer”
YourServer: “Okay, here it is.”
Browser: “In here I see I need image1.jpg from YourServer.”
YourServer: “Okay, here it is.”
Browser: “In here I see I need image2.jpg from YourServer.”
YourServer: “Okay, here it is.”
Browser: “I need jquery.js from Google’s CDN.”
Google CDN: “Okay, here it is.”
etc etc

You can see this in the Network window of the developer tools of your browser. For example, I opened google.com.

1777×832 169 KB

I loaded 1 webpage. The browser sent 39 requests (bottom right).

2 Likes
7

Here is a preload script…

<script>
(function() {
   'use strict';
   
   var preloads = [];

function preload(){ 
      for( var i = 0; i < arguments.length; i ++ ) {
          preloads[ preloads.length ] = new Image();
          preloads[ preloads.length - 1 ].src = arguments[ i ];
  }
 }
   preload( 'images/myimage1.jpg', 'images/myimage2.jpg' );
   
}());
</script>

coothead

8

Thanks man. Very helpful

9

Correct me if im wrong, but it looks like this function just saves the paths to the images and not preloads them.

10

It sounds like that would best be achieved by including both images from the start and only toggle their visibility, like e.g.

.image-toggle img:last-child {
  display: none;
}

.image-toggle.toggled img:first-child {
  display: none;
}

.image-toggle.toggled img:last-child {
  display: block;
}

<div class="image-toggle">
  <img src="myimage1.jpg" alt="">
  <img src="myimage2.jpg" alt="">
</div>

document
  .querySelector('.image-toggle')
  .addEventListener('click', ({ currentTarget }) => {
    currentTarget.classList.toggle('toggled')
  })

A typical use case for setting a source dynamically would be the exact opposite – lazy loading images to reduce the initial page weight.

1 Like
11

Is it possible to get multiple srcfiles returned from Ajaxcall instead of only one "text"response ? So if I check the source after ajaxcall there would be newfiles available, scripts, images, whatever I want

12

No other way to load them to source without adding imagetags?

13

You’re wrong.

var myImage = new Image(100, 200);
myImage.src = 'picture.jpg';
document.body.appendChild(myImage);

This would be the equivalent of defining the following HTML tag inside the <body>:

<img width="100" height="200" src="picture.jpg">
1 Like
14

Got it

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.