Loading an image with javascript

LearnHow to Load an Image With Async JavaScript

Whether you have an image gallery with high-res images, or you’re creating a game with lots of image assets, the process for loading an image with JavaScript stays the same.

1. Create an Image with JavaScript
2. Assign a URL to the src attribute of the new image
3. Create a handler for the onload attribute, this will be triggered once the image is downloaded

Let’s get started with the setup.

Setup

1. HTML

The HTML is straight forward.

I’m using a gif with 1 clear pixel that gets stretched over the whole image tag. If you don’t use an image you’ll get a “missing/broken image” icon like this:

You can also use a low-resolution version of the image you’ll eventually show. When the high-resolution downloads you can swap it out.

2. CSS

In this example, I’ve included some CSS that will add a loading.gif in the background of destination image tag.

This will center the loading.gif into the middle of the destination image.

3. JavaScript

First, get the image tag you want to eventually populate.

In my case, it’s the first image on the page.

var image = document.images[0]; 

Then, I create an image programmatically.

var downloadingImage = new Image(); 

Once you set the src attribute on this image downloading will start, so before that we want to create a handler for the onload event. Once the image has been downloaded this will trigger.

downloadingImage.onload = function()< >; 

Then we want to set the destination image source to the downloadingImage source, in other words, this source.

downloadingImage.onload = function()< image.src = this.src; >; 

Finally, we want to set the downloadingImage ‘s source.

downloadingImage.src = "http://an.image/to/aynchrounously/download.jpg"; 

The image will start downloading in the background immediately. Once the download is complete the onload callback will be triggered and the destination’s source will be that of the newly downloaded image.

Here’s the complete JavaScript code:

var image = document.images[0]; var downloadingImage = new Image(); downloadingImage.onload = function()< image.src = this.src; >; downloadingImage.src = "http://an.image/to/aynchrounously/download.jpg"; 

Final Thoughts on Loading Pictures with JS

This was a technical overview on how to load an image with JavaScript in the browser. As with all JavaScript applications, you should use JavaScript code to progressively enhance your site. Making sure that your application gracefully degrades is always a consideration.

Continue Your Coding Journey With Treehouse

Treehouse offers high-quality online coding classes to learn code, design and more all on your own time. Polish up your JavaScript knowledge with the Full-Stack JavaScript Techdegree, or take individual tracks to curate your learning journey. Sign up for your free trial today!

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you’ve been dreaming about.

Источник

Downloading an image into Javascript and inserting it into HTML after completion

With Javascript, it is possible to load an image from the server using an Image object. This can be useful for pre-loading images onto the client computer before displaying it in the HTML document, while the image loads you can display a loading text or animation to let the user know there is progress being made.

Step-by-step procedure:

-Create a new Image object and assign it to a variable

-Set the Image object’s «src» property to the URL of the image (which request the image from that URL and begin loading it)

-Assign a function to the Image object’s «onload» event

-Within the function, add a new image element to your HTML document using the same URL for the «src» attribute

When the image has successfully downloaded onto the client machine and stored within the image object, the «onload» function will be called and an image element will be added to the HTML document with the same src value as previously used, the image will be added instantly due to the file being already loaded onto the client computer.

If you are loading an image that resides within your website directory, then you do not have to include the full URL, simply state the relative path to the image file from the web page’s directory.

div id="img_container"> Loading image div> 

var imgContainer = document.getElementById("img_container"); var testImg = new Image; testImg.src = "images/test.png"; testImg.onload = function()< imgContainer.innerHTML=""; >;

The above example will display the text «Loading image» until the image file has been loading into the image object, then it will add a new image element into the container with the URL that we have loaded.

Christopher Thornton @Instructobit 5 years ago

Источник