Scenario
I use two images namely 'car-light.png' and 'car-dark.png'. When user touches the image, which was car-light.png, it becomes car-dark.png.
Here is the code I used.
<img src="car-light.png" id="car" ontouchstart="changeCar()">
In changeCar(), I wrote this code
$("#car").attr('src','url(car-dark.png)');
Question
Is there a way to speed this up by preloading the image? Or am I making too big a deal with fast loading time? If it is the case where pre-loading is necessary, is the following code correct?
var img1 = new Image();
img1.src = "car-dark.png";
function changeCar(imgName)
{
document[imgName] = img1;
}
and in HTML
<img src="car-light.png" name="car" ontouchstart="changeCar('car')">
Putting this somewhere in your startup JS code will preload the image:
var img1 = new Image();
img1.src = "car-dark.png";
This will cause the image to be in the browser cache so it will load quickly if you use it later on in the action of the page. You could use the img1 object directly, but often it's easier to just use the URL and let the browser fetch the image from it's memory cache like this:
<img src="car-light.png" id="car" ontouchstart="changeCar()">
function changeCar() {
$("#car").attr('src','car-dark.png');
}
Related
I have a simple carousel on my home page. It changes pictures automatically after a couple of seconds. The html looks like this:
<div>
<div id="img-1" class="carousel-image" style="display: block;"></div>
<div id="img-2" class="carousel-image" style="display: none;"></div>
<div id="img-3" class="carousel-image" style="display: none;"></div>
</div>
I use a javascript function to add the images as background-image. To make sure the carousel images are all loaded before the carousel starts changing automatically I use new Image() and count the number of loaded images. Once all three images are loaded I can do startCarousel().
var numberOfLoadedImages = 0;
function setImage(imgUrl, imgId){
var homeImage = document.getElementById(imgId);
homeImage.style.backgroundImage = 'url(' + imgUrl + ")";
var img = new Image();
img.onload = function() {
if(numberOfLoadedImages === 2){
startCarousel();
}
numberOfLoadedImages++;
}
img.src = imgUrl;
if (img.complete) {
img.onload();
}
}
I can then simple call this function like this:
setImage('img-1', 'img-1');
setImage('img-2', 'img-2');
setImage('img-3', 'img-3');
What I would like to achieve is to lazy-load the second and third image. These two are not necessary at first page load; only the first image is important. Google Page Speed Insights mentions the second and third under the heading "Serve images in next-gen formats", whereas, if you ask me, they should not be considered part of the page. They should be loading in the background and they are really not essential for the first display and UX.
How can I tell the browser (or Google Page Speed Insights) that these images are completely non-essential for UX purposes and should not be considered part of the first paint and UX?
I tried putting the second and third call in a timeout with a short interval, but that didn't do the trick.
NB: I am using vanilla javascript; no plugins at all.
You can wait for everything to load and once the page is fully loaded (including images, etc.) you can run setImage for your second and third image.
document.addEventListener('DOMContentLoaded', function() {
setImage('img-2', 'img-2');
setImage('img-3', 'img-3');
}, false);
In case Google Page Speed Insights still registers this and prolong the initial page load time you can use async function to call setImage.
I'm trying to preload an image via javascript and insert it into another image at the right moment without a new fetch.
Unfortuantely, when I replace the src of an img with the preloaded src, the image gets reloaded and chrome doesn't use the cashed one. What can I do?
This is how I preload the image:
if (document.images) {
this.img = new Image();
this.img.src = "img/img.jpg";
}
and later I'm inserting it like this:
this.poster.src = this.img.src;
Thanks!
Actually this code works fine. I was using a preprocessor that would prohibit caching. On the server everything works fine
Preload may not be the correct term...
I have a page which loads a very large image. I wanted to wait for the large image to completly load before displaying on the page for the user.
At the moment, I have a loading gif and i'm using javascript to wait for the image to load and then replace the loading gif src with the image:
<img src="loading.gif" id="image" />
<script>
img = 'very_large_image.jpg';
var newimg = new Image();
newimg.src = img;
newimg.onload = function(){
$('#image').attr('src',img);
}
</script>
I'm wondering if there are quicker ways to load this image such as a pure CSS way or some way to force the browser to download this asset first. The code above is obviously positioned in the location where the image is expected to load. So there is code above and below.
One CSS option I thought was to position the image off the screen and once it's loaded, perform the src replace.
My server is running http2, so it should be pretty quick. I just want to know if there is a better way then what i'm doing now to ensure the large image is loaded the quickest way possible for all major browsers.
I should add, i've already done plenty of optimisation of the image file already. I'm working with high resolution photography.
Thanks!
You can make the JPG progressive and then just let it load. Browsers will progressively display the image first blurry and then load more details.
This is the best way because user can see the image even before it's fully loaded.
Edit:
On linux use jpegtran, on Windows use Photoshop or RIOT
Your doing a great job!
Here is what I came up with:
https://jsfiddle.net/Vandeplas/jkwweh52/
HTML:
<img src="http://loadinggif.com/images/image-selection/32.gif" large-src="http://www.planwallpaper.com/static/images/518079-background-hd.jpg" large-class="fancyImg">
JS:
$('img[large-src]').each(function() {
var img = $(this);
var newimg = new Image();
newimg.src = img.attr('large-src');
newimg.setAttribute('class', img.attr('large-class'));
newimg.onload = function() {
img.replaceWith(newimg);
};
});
That separates the JS from the HTML + you can easily add infinite more pre-loading images without having to change the js!
Very easy way to preload images which are needed later
$.preloadImages = function() {
for (var i = 0; i < arguments.length; i++) {
$("<img />").attr("src", arguments[i]);
}
}
$.preloadImages("hoverimage1.jpg","hoverimage2.jpg");
I think that the best solution for your problem is split this image and load the parts assync at the same time
I'm using document.images to load images when a visitor first visits the website. The reason is because I have a few different areas which have rollover images. Before I switch over to using CSS sprites (modifying a lot of work), I'm going to ask here.
So I'm preloading images with this:
images = new Array();
if (document.images) {
images.push(preloadImage("http://website.com/images/myimg.png", 300, 200));
}
function preloadImage(src, x, y) {
var img = new Image(x, y);
img.src = src;
return img;
}
And according to Chrome's "resource" panel, this is working just fine. Even after pressing CTRL+F5, the images listed in the JS are downloaded.
HOWEVER, they are not used. If I hover over an element in one of my three scripts, the image is downloaded a second time. Derp?
I assume that when preloading images this way, you're supposed to put that image array to use. I thought the browser would be smart enough to say "Hey, this is the same image, let's use it twice" but apparently not.
So is this correct? Do I need to rewrite my programs to preload images individually? I know it doesn't sound hard, but it's really not designed for that.
This is not really an answer to your question, but I proprose a different solution. Put all the images you need to preload inside a div that is hidden from the user. I know, I know, this i not as elegant, but it should work just fine. :)
<div style="display: none;">
<img src="http://website.com/images/myimg.png" alt=""/>
...
</div>
This works fine for me:
function imgPreload() {
var imageList = [
"my/firstimage.png",
"my/secondimage.jpg",
"my/thirdimage.png"
];
for (var i = 0; i < imageList.length; i++ ) {
var imageObject = new Image();
imageObject.src = imageList[i];
}
}
imgPreload();
Cheers. Frank
I'm loading an image onto a texture map with GLGE (sorta like webGl). However for the sake of loading speed I'm loading a low resolution image first (which would be quicker) and then want to change the src to the high resolution image once the large image is loaded. This is what I'm doing now
var texture = new GLGE.texture();
function updateTexture(){
var image=new Image();
image.src = "models/testLargeMap_map0.jpg"; // load image
image.onload = function(){
texture.image("models/testLargeMap_map0.jpg"); // supposedly swap image on load (not working as I thought)
}
}
However, when during this period of changing the src, the model and all its functions freeze. How do I make it load the image asynchronously and on load swap it to the higher texture for a smooth instantaneous texture change?
You can set an image.onload event handler like this:
var big_image = new Image();
big_image.onload = function () {
texture.image("models/testLargeMap_map0.jpg");
}
big_image.src = "models/testLargeMap_map0.jpg";
(Note that I set the onload handler first, then set the src attribute. If I do it the other way around, it fails in IE).
This will preload the image before calling texture.image. I don't know anything about this library though, so I can't be certain it will use the pre-loaded image.
The image.src will be requesting the image from the server and it will initiate the onload event, and again u are requesting the image to be swapped so it is getting freezed. Why do you need this approach. You can have better way of doing this like, allow the low resolution image to be loaded first then assign the onmouseover or onclick event for the image on that time u can show a popup like shown on google images and then in it just display the high resolution images. On that time u will be requesting a single image the process will be quicker.
Hope this helps you
I'm not familiar with "GLGE" but it looks like the problem is that the method .image() loads the image again (kind regardless if that happens in the load event handler for the same image).
So unless you can set the image reference directly, like
texture = this; // within the load handler
there is no way to accomplish it with this library.