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.
Related
I have image gallery and am updating front-end, is there a way to use javascript or jquery or any other front end technology to identify which image was loaded from cache? I would like to apply additional class for those items.
Thanks for any sugestions.
Short answer :
No
Long answer :
No, and there is a reason for that :
If you could know which element of tha page was from the cache, you could deduce that your user have been to the same page or another page with the same element/ressource. It would be a massive potential privacy breach.
A similar problem was arised with the changing color of link if they are visited (see http://dbaron.org/mozilla/visited-privacy for more info)
You can use the function below. However it will load the image if not cached.
function isCached(src) {
var image = new Image();
image.src = src;
return image.complete;
}
I am loading 10 GroundOverlays onto a GoogleMap and would like to show the progress associated with loading the images.
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(42.80059,-115.253806),
new google.maps.LatLng(47.481725,-110.227471));
var layer1 = new google.maps.GroundOverlay("overlays/layer1.png",imageBounds);
layer1.setOpacity(.5);
layer1.setMap(map);
How can I detect when the actual image of each overlay has loaded or the % loaded? I'd like to add a progress bar or something to show the user that overlays are loading as it can take 5 seconds or so.
If you have one single image as a groundoverlay, I'd do the following:
Create an img tag through javascript
Set its src to overlays/layer1.png
display a waiting box
Add an onload event to it, on which load it as a gmaps overlay and close the waiting box.
Progress... that's a bit more browser specific. But loading is easy, so:
function loadOverlay(){
var img = new Image();
var img_url = "overlays/layer1.png"
img.src= img_url;
$('#wait_for_overlay').show();
img.onLoad = function(){
$('#wait_for_overlay').hide();
var layer1 = new google.maps.GroundOverlay(img_url,imageBounds);
layer1.setOpacity(.5);
layer1.setMap(map);
}
};
Reason why this will work:
Creating an img object and setting its 'src' attribute will make the browser start to download the requested file as soon as the javascript function doing this has finished.
The browser will put this image into its local cache, then call the onLoad function to see what should happen with it.
The callback actually does nothing to the img variable (perhaps it should, make sure it doesn't get wiped out as per closure rules, do a NOP with it if this is buggy), but instead calls the google-maps function.
The google-maps function will request the image at the exact same url, at which the browser will look up its cache table, and bring the image back immediately from cache.
This trick is nasty, but in fact, the google maps engine will do the exact same onLoad thingy in the background (as this is how map engines work).
I hope this satisfies your question... no progress bar, just a loading indicator... Perhaps you could do progress bar by requesting it with XHR and checking progress, I'm not sure, but the trick will be the same: do a faux request, in order to make it arrive to the cache.
I doubt you can do it. You may request for new functions added to the GroundOverlay class in order for the users to have more access and control over the loaded image. I'd like to have those kind of functions for my projects too.
As of 10 years later, 2021 Dec. I can confirm that #Aadaam 's idea works great !
Try my example:
click the example link, try zoom map or pan,
it load image as groundOverlay, the progressing bar show on left panel bottom.
new Image()
is HTML img object, document is here
img_object.onload
is all lowercase, if you write
.onLoad
will give you error.
https://transparentgov.net:3200/googlemaps12/default?layer_id=0&layer=SilverRock_MasterPlan_29Nov2016_s200-images.jpg¢er_lat=33.65789936781538¢er_long=-116.25862990762825¢er_zoom=15&url=https%3A%2F%2Fgis.la-quinta.org%2Farcgis%2Frest%2Fservices%2FCommunity_and_economic%2FSilver_Rock_Master_Plan%2FMapServer&panto=0&overlayOpacity=8&overlayType=overlayType_image
Is there a way to load an image specified in the src attribute of image tag in an html asynchronously?
My ultimate aim is to hit a java class through a image src tag. I want that to be asynchronously without disturbing current functionality of the web page.
How can this be done?
All images are loaded asychronously. If the <img> tag with src attribute specified is present in the initial HTML of the page, it will start loading immediately as the page's HTML is parsed and loaded.
If you want to control when it starts to load, then you cannot specify the img URL in the HTML of the page.
For example, this javascript will load an img asychronously when you call this function and it will call your callback when it's successfully loaded:
function createImg(url, fn) {
var img = new Image();
img.onload = fn;
img.src = url;
return(img);
}
You can then put this image tag in your page by adding it to the page DOM if you want.
Based on your comments, it's not clear what you're really trying to do. Perhaps you really just want to issue an ajax call to your server and don't need to mess with img tags at all.
Any IMG tag with a src attribute will load immediately when the page is requested.
You can put the source in a data attribute instead if you want to control how and when the image should be requested.
i'm working in an application
i have to change some css files in the page and some images (reloading them from the server) using javascript , but it takes some time and it's obvious that page items are reloaded slowly -in slow connections- , so is it possible to do this processing in the background and then display the whole page when ready ??
AFAIU you can put it in a hidden IFRAME. In this IFRAME you handle onLoad event. However, this won't fasten up loading process, it will only hide it from user.
Examle:
Let's say that you have a long-lasting JavaScript method named longLoad() . You should put it in a separate HTML page named e.g. hidden.html.
<html>
<script type="text/javascript">
function longLoad() // javascript method here...
{
/// some code here...
}
</script>
<body onLoad="longLoad();">
</body>
</html>
Your main page (the one that is actually visible in browser) may look like this:
<html>
<body>
....
.... content
....
<iframe src ="hidden.html" width="100%" height="0">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
As you can see IFRAME height is set to 0 making it invisible on the page- that's why I called it hidden. However, when the user loads the page, the hidden IFRAME will be loaded too. And its onLoad event handler will also be called. And it is possible to access and modify content of the main page from that JavaScript event handler (through DOM trees).
PS. The above code was written from memory, however the presented solution works. It was used long before AJAX came into popularity.
You can hide the whole page while your work is going on, or you could load your CSS and images and only do the updates to the DOM when all your materials have made it to the client.
You can load an image by creating a new Image object:
var img = new Image();
img.onload = function() { /* do something */ };
img.src = "/new/image.png";
The "onload" function will run when the client has received the image file and it's ready to be displayed. Thus you could arrange to load up images that way, and use the "load" handlers to track when they're ready. When all of them are, then you can update the DOM and it should go very quickly.
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 :) ).