How to preload image offscreen and then move to different onscreen element? - javascript

I'm building a website/app that will display six different images at a time. The contents of those images are loaded from another site and changing regularly. Where any particular image goes on screen depends on the state of all images already on screen.
To get the image I use jQuery to change the src attribute of one of the 6 img locations, then wait for the load using jQuery load(), then show it. However, this means I have to pick my location before the image is loaded. The problem I'm having is that between the time I initiate the load and when the image finally does load, the proper location for that image might have changed.
So my question is whether there's a way to load the image offscreen (say in a hidden img), and then, when it's loaded, get a notification of it being finished and then move that image to the correct location at that moment.
I've found lots of preload questions and answers on StackOverflow, but they all presume you know where you want the image to go when you initiate the load.
Update: thinking more on this question, perhaps another way of framing it is 1) if I load an image from an offsite server into an offscreen/hidden img and wait for it to load, 2) would subsequently setting the src attribute of an onscreen/visible img to the same image URL draw from the server or the browser cache? In other words, if I load a remote image offscreen does the next request for that same image go back to the server or to the browser cache (and would this be consistent for all browsers)?

One Way to do it:
function loadImg(url, callback, key) {
var image = new Image();
image.onload = function() {
callback(image, key)
};
image.onerror = function() {};
image.src = url;
}
function imageOnload(image, key) {
imageGoesTo[key].src = image.src
}
var imageGoesTo = {
"firstPicture": document.getElementById("img1"),
"secondPicture": document.getElementById("img2"),
}
loadImg("http://7pi.azurewebsites.net/img/DSC09906.jpg", imageOnload, "firstPicture")
imageGoesTo["secondPicture"] = document.getElementById("img3")
loadImg("http://7pi.azurewebsites.net/img/DSC07934.jpg", imageOnload, "secondPicture")
<img id="img1" alt="loading">
<img id="img2" alt="loading">
<img id="img3" alt="loading">

Related

web img tag load image block scrollbar and the main thread. How to resolve for UX

I have a list of products when enter this page. Will get a list of product and product image, this image is larget, but request time is not a problem. And I will set this image like Thumbnail, then the problem happened when a list of image loading on img tag, the scrollbar will be blocked.
The problems:
image have been load(not Http request) and append image to DOM will block the main thread?
How to solve this problem besides Compresse the picture at the backend?
Depending on how much prioritiy you want to give images you could do something like load the html tag with:
<img data-unloaded_src="[your image location]" scr="">
Then load the image later on with something like
window.requestIdleCallback(function(){
var all_images = document.getElementsByTagName('img');
for(var i = 0; i < all_images.length; i++){
if(all_images[i].dataset.unloaded_src){
all_images[i].src = all_images[i].dataset.unloaded_src;
}
}
});
Your milage will vary using requestIdleCallback. You might want to just trigger it on dom content loaded or something? It seems odd that any image loading would lock up the scroll bar...

Can I detect via JavaScript whether an image will show the alt text or the broken image picture?

I'm trying to load a number images, some will produce a 404 and some requests are aborted.
If I have this:
function addImage(my_image_path) {
img = document.createElement('img');
img.onerror = function (evt) {
console.log("nope");
console.log(evt);
};
img.alt = "COULD NOT DISPLAY IMAGE"
img.src = some_path_to_image;
document.body.appendChild(img);
}
Both a 404 and a failed request will trigger the onerror handler and I have no way of differentiating between the cause of the error.
However on the screen I can see the 404 is displayed with the browsers broken image while the failed request shows the alt text.
Question
Is there a way to find out via JavaScript if the browser is defaulting to broken image or alt text? Best before putting putting the image tag on screen.
I have tried image.complete, image.naturalWidth|Height but that's all of the tricks I know. Maybe someone can chip in with more magic.
Thanks!

jquery image load function not being called properly

I am having the following issue in a mobile web application I am developing: In javascript, I have a Image() control and I have an event attached to the image control that should fire when the image gets loaded. Inside of the "pageshow" event for the page, I am setting the src attribute of the Image() to a valid image. If I return to the page, after having visited the page once, the load event for the image is not firing. I have seen several threads say that this can be caused by the image being cached but in my case I am pretty sure that is not the issue. Why doesn't the load event for the image fire and how can I make it work properly?
Code follows:
<script>
var srcImage = new Image();
$(srcImage).on("load", function() {
...
});
$(document).one("pageshow", '#pageid', function () {
srcImage.src = imagepath;
});
</script>
I found the issue, thanks to epascarello (see above comments). I assumed the image file was valid but discovered it was not. When a valid image file is used, the above code works fine.

How to detect if the browser is loading

I am trying to show a loading image when a users click a link that will show a large image in the same page.
I was wondering what's best way to detect image loading WHILE the page has been loaded already (so window.onload() doesn't work).
Load the image with JavaScript and then you can use the image's onLoad attribute:
Image1 = new Image();
Image1.src = 'photo.gif';
/* Code here to display loading hour glass etc */
Image1.onload = function() {
/* Image has loaded here */
}
$("img.loader").show();
$("img.big").ready(function() {
$("img.loader").hide();
}):
Add "onclick" event to your link, in which via setTimeout show your loading image. E.g.
Link Text
function showLoading() {
// Code to show "Loading..."
}

HTML image render notification

In one webpage, I have a big image to load and other contents. Sometimes the image takes longer time to load and I would like to track that. Is there any means by which I can get notified using Javascript when browser completely renders the image?
EDIT
I use the following code to load the image.
<table border="0" style="background-image: url(http://abc.com/abc.jpg);" id="imageDisp">
</table>
SOME More UPDATE
Is there any simple way to know how long the image took to render? Using the javascript I am getting a notification that the image is loaded now, is there a way to know when the image load started? So that the elapsed time can be calculated?
You can hook on the load event of the <img> element. E.g.
<img src="http://upload.wikimedia.org/wikipedia/commons/3/31/Atlantic_hurricane_tracks.jpg"
onload="alert('finished!');">
Jsfiddle demo.
Update:
Then create new Image() instead (the average browser is smart enough not to request the same image twice and multiple references will point to the same image request):
<script>
var img = new Image();
img.src = 'http://upload.wikimedia.org/wikipedia/commons/3/31/Atlantic_hurricane_tracks.jpg';
img.onload = function() {
alert('finished!');
}
</script>
Another jsfiddle demo (don't forget to clear browser cache, the same image might be already cached :) ).

Categories