Image src not being written to popup window body? - javascript

I need to print images using JavaScript. I couldn't find a jQuery solution to this, so I tried the following:
var printWindow = window.open('', 'Print Image', 'height=400,width=400');
printWindow.document.write('<html><head><title>Print Image</title></head><body></body></html>');
var img = printWindow.document.createElement('image');
img.src = 'http://ecx.images-amazon.com/images/I/51j68MN%2B99L._SL500_SS100_.jpg';
img.onload = function() {
printWindow.print();
printWindow.close();
};
printWindow.document.body.appendChild(img);
printWindow.document.close();
Unfortunately, the popup HTML is this:
<html><head><title>Print Image</title></head><body><image></body></html>
So it appears that the src attribute isn't being set for the image.
I had previously put the image tag in the document.write() function, but I discovered the print window was blank for some images. My theory was that the print window was opening before some of the images finished downloading and thus showed (and printed) blank. So that's why I tried this method.
Why isn't this working, and how can it be fixed?

printWindow.document.createElement('img');
use correct tag name
look at http://jsbin.com/nurohutatasi/1/

Have you tried
var img = new Image();
instead of
var img = printWindow.document.createElement('image');
<image> isn't a correct image tag (<img> is it)

You are appending the image before it is loaded. And also, closing the printWindow before the image load and print (the last two lines). img is the correct tag name:
var img = printWindow.document.createElement('img');
img.src = 'http://ecx.images-amazon.com/images/I/51j68MN%2B99L._SL500_SS100_.jpg';
img.onload = function() {
printWindow.document.body.appendChild(img);
printWindow.print();
printWindow.close();
};
//printWindow.document.body.appendChild(img);
//printWindow.document.close();

Related

Javascript: loading image in memory & displaying in a new document

I have a requirement where I need to create a new document on the fly and display an image in it. The url of the image is passed as a variable into the function.
newWin('folder/image.jpg');
The codes of this function:
function newWin(url){
var strg = '<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"></head><body>';
strg += '<img src ="'+url+'"></body></html>';
var myWindow = window.open("", "MsgWindow", "width=600, height=400");
myWindow.document.writeln(strg);
}
There is more to the contents of the new document that what is displayed here.
The image doesn't load all the time or loads on 3rd or 4th attempt. How do I pre-load the image in the memory so that it appears instantly? I am not sure how to implement new image() in this situation. Kindly help!
You can either
Preload the image with an Image object and hope the browser will cache it
Preload the image data, convert it into base64, and put that data into the new window's html.
Method 2 is alot of code and really only necessary when the preloading has to work 100% of the time.
So here is method 1:
function preloadWin(url){
var img = new Image()
img.src = url
img.onload = function (){
newWin(url)
}
}
Call preloadWin('folder/image.jpg') and it should open up the window once the image is loaded.

Is it possible to set the equivalent of a src attribute to the first img src of a page in html and javascript?

I am probably missing something simple but it's quite annoying when everything you read doesn't work.
I am trying to set the "throbber" img src to the first img src of a webpage. So far, I've got:
<script type="text/javascript">
var image = document.createElement("img");
var imageParent = document.getElementById("body");
image.id = "id";
image.className = "class";
image.src = searchPic.src; // image.src = "IMAGE URL/PATH"
imageParent.appendChild(image);
Would it be possible to implement this with html only?
And
<div id="throbber"><img src="http://www.cloudaccess.net/images/Google-Chrome-Extensions.jpg" /></div>
Is it possible to change the img src to the first img src of a page depending on the website?
Yes it is. Try following code:
window.onload = function(){
var divEl = document.getElementById('throbber');
var image = divEl.getElementsByTagName('img')[0];
// set the new image
image.src= 'https://your/new/image.png';
}
Note that we need to take advantage of window.onload in order to make sure DOM is ready before manipulating it.
See this JSfiddle DEMO
If your throbber image is in the website from which you're trying to pull the image, you can use jquery like this:
$(function (){
// get the src of the first image that is not your throbber image
var src = $('img:not("#throbber img")').attr('src');
// set the throbber image to this src
$('#throbber img').attr('src', src);
});

determine whether body's background-image (css) has been loaded

Depending on some conditions, different background images are loaded:
$('body').css('background','url(image.png)');
Is there a way to determine whether the background image has loaded? I need to execute a function when the image has been loaded.
You could load the image into a hidden <img> tag and assign an onload handler to the tag. In the onload handler you could populate the background image of the body (which should happen more or less instantly because the image is now in the browser cache) and then run your custom code as well.
var hiddenImg = new Image();
hiddenImg.onload = function(){
$('body').css('background','url(' + this.src + ')');
your_custom_onload_code();
};
hiddenImg.src = 'image.png';
var img = new Image ();
img.onload = function () { $('body').css('background','url(image.png)'); };
img.src = src;

do content added to DOM count for the total page load time?

I mean if I append some contents like this:
<body>
//contents
<script>body.appendChild('<img src="new.png">');
// other contents
</body>
the browser will fire window.onload considering only the original html or it will take in consideration the load of the new image too? (new.png) ?
Besides that code/markup being incorrect, it will consider the new image. To append it to the DOM will be to download whatever the src attribute points to.
However, if this code was placed inside of a window.onload = function() { ... }, then it wouldn't be considered because its download would not occur until your window was loaded.
Here is the code that would actually work...
var img = new Image;
img.src = 'http://www.gravatar.com/avatar/3535689c965d66db3d2a936ced96192a?s=32&d=identicon&r=PG';
img.alt = 'Example';
document.body.appendChild(img);
jsFiddle.

checking if image is fully loaded

I am using
if (document.getElementById('<%= MainImg.ClientID %>').complete) {
hideLoadDiv();
}
to hide a div which indicates the image is not loaded yet,
but it hides before the image has finished loading and is shown, while the browser is giving me a message that the page is still transferring data from the server :S
Is there another function I can use to make sure that the image is fully loaded?
You can use the onload event on the image iteself:
<img src="foo.jpg" onload="hideLoadDiv();" />
Update: looks like your question is a dup
javascript
img = new Image();
img.src = "foo.bar";
img.onload = function() {stuff();};
img = new Image();
img.onload = function() {stuff();};
img.src = "foo.bar";
src should go last

Categories

Resources