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.
Related
I have an angular app which is having an iframe that loads a chat bot from an external url.I need to check if the url is fully loaded and the url is not down.
The iframe is initially not loaded on the dom and is only loaded after the user clicks on an icon.Since the iframe takes some time to load initially the iframe space will be empty.I tried showing a loader by setting it as background to the div that contains the iframe but the loader was always running even after the iframe is loaded.
Can somebody please guide me? Im new to angular.Im using agular 5.TIA
The simplest way to do this is to check onload events on iframe. ContentDocument of type Document, readonly, checks this frame contains, if there is any and it is available, or otherwise it will return null.
//Get reference of the iframe with reference variable and call
// onload event on it
iframe.onload = function(){
var that = $(this)[0];
try{
that.contentDocument;
}
catch(err){
//TODO
}
}
I have a page on a website that is just an image tag. When the page is loaded, it makes an API call and changes the source of the image depending what picture is available that day. For example, after an API call has been made (with an example picture):
<head>
<body>
<img src="http://www.tizag.com/pics/htmlT/sunset.gif"/>
</body>
</head>
My goal is to be able to use the URL of the page with just the image as the source of an image on any other page. Other sites would then be able to use the URL of the page with the image.
In other words, how would I take the source of the image on the page above and use it is the source of an image on a different page?
I'm not sure that I completely understand Your issue, but can't You just use the same source URL on other pages?
Maybe You want to have reference to that image so when You want to change this image on all pages You wouldn't have to do this on all pages but just one. Then it would be simpler to just replace file.
I think you should use javascript script that would be verifying which image should be displayed.
Can't you just use the same API to get the source on the other site?
If you can't:
First, get the XML from the image-only-site and parse it as DOM elements.
Next, get the img element's source.
$.ajax({
url: 'your-url', success: function(data) {
var xmlString = data, parser = new DOMParser(),
doc = parser.parseFromString(xmlString, "text/xml");
var src = doc.firstChild.src;
}
});
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.
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 :) ).