I have an HTML page with about 100 images. How can I detect when the page has completely loaded, including all images? I have been using the following code, and it seems to work in Chrome 80.
document.onreadystatechange = function () {
if (document.readyState == "complete") {
setTimeout(init, 10);
}
}
However, Firefox 72 fires the init function right away. I can see the images as they pop in and are downloaded after the init function has fired. Is there a cross browser method to do what I need? Thanks.
I have tried window.onload, document.onreadystatechange and window.addEventListener('load', ...) already.
FYI, the image files are PNG format, but are embedded within an SVG file. And the SVG file is embedded within the HTML file. I can post a link if it is desired.
Edit: This is as minimal as I could get it.
<!DOCTYPE html>
<html>
<head>
<title>minimal reproducible example</title>
<meta charset="UTF-8">
<style>
body {padding:0;margin:0;color:#ffffff;background-color:#404040;}
#cross {z-index:2;position:fixed;left:50%;top:50%;visibility:hidden;}
#embed {z-index:1;visibility:hidden;}
#load {z-index:-1;position:fixed;display:inline-block;left:50%;top:50%;width:10em;margin-left:-5em;text-align:center;}
</style>
<script>
function init() {
// in firefox 72 the embedded PNG images are loaded noticeably after the SVG image is made visible instead of before
document.querySelector('#embed').style.visibility = 'visible';
document.querySelector('#cross').style.visibility = 'visible';
}
window.onload = function () {
setTimeout(init, 10);
}
</script>
</head>
<body>
<div id="load">Loading...</div>
<svg id="embed" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1024" height="1024" viewBox="0 0 1024 1024">
<image width="1024" height="1024" x="0" y="0" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAQABAMAAACNMzawAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAwUExURQAAAP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFulh5UAAAAJcEhZcwAADsMAAA7DAcdvqGQAAApaSURBVHja7dqxDQNBEAMxt3D9N+sePhGwQ+VMJtbPzMzMzMzMzMzMzMzMzMzM7u59HH/DCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHFvZmZmZmZmZmZmZmZmZmZmB7c+JPBbL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9mZmZmZmZmZmZmZmZmZmZHdz6kMBvvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3ZmZmZmZmZmZmZmZmZmZmdnDrQwK/9QLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2Dcm5mZmZmZmZmZmZmZmZmZ2cGtDwn81gsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxb2ZmZmZmZmZmZmZmZmZmZge3PiTwWy9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvZmZmZmZmZmZmZmZmZmZmR3c+pDAb72AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY92ZmZmZmZmZmZmZmZmZmZnZw60MCv/UCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g3AsY9wLGvYBxL2DcCxj3Asa9gHEvYNwLGPcCxr2AcS9g0r/3B7oXJhneLUE8AAAAAElFTkSuQmCC" />
</svg>
<img id="cross" width="16" height="16" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAAAsSURBVDhPY2xoaPjPQAkAGQAEDORgkF4mqDlkg1EDRg0AgVEDGBgozM4MDAB7ETPvhopeAgAAAABJRU5ErkJggg=="/>
</body>
</html>
What is supposed to happen:
Render gray screen with text "Loading..."
Small gray box appears at the same time (actually immediately after) large grid image is loaded
What happens in Firefox 72:
Render gray screen with text "Loading..."
Small gray box appears before the large grid image is loaded
Not sure how to slow things down enough so the difference is noticeable. You could try copy/paste-ing the large grid image 100 times, moving them to the right by 1024px each time.
It seems like a contrived problem but I am trying to make a proof of concept of an HTML 5 document, containing inline SVG, which itself contains a <foreignObject> element with an HTML canvas inside. I then want to call a JavaScript function to draw on the canvas.
(How I got here: I want to use SVG as a format for defining an animated graphical view which can contain graphs, which are animated by replacing a dummy element in the SVG with a live graph using JavaScript / ECMAScript, and one of the JavaScript libraries we are considering to generate the graphs (Flot) uses an HTML canvas for the view, so I want to inject this canvas into the SVG view. A further complication is we ideally want this system to run on local files, on the file:// protocol, meaning we can't run scripts on external files (e.g. referenced with <object> or <iframe>) because browsers block them, hence the inline SVG.)
Here is an HTML source illustrating the problem:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas Test</title>
<script type="text/javascript">
function draw_box() {
var canvas = document.getElementById("box_canvas");
var context = canvas.getContext("2d");
context.fillRect(50, 20, 50, 60);
}
</script>
</head>
<body>
<h1>Canvas Test
<p>
<svg width="400" viewBox="-10 -10 268 108">
<rect style="fill: #a0a0a0" x="8" y="8" width="240" height="80" rx="40" ry="40"/>
<g>
<rect style="fill: #0000ff" x="0" y="0" width="240" height="80" rx="40" ry="40"/>
<rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke-linejoin: round; stroke: #000000" x="0" y="0" width="240" height="80" rx="40" ry="40"/>
<foreignObject x="120" y="25" width="150" height="100">
<canvas id="box_canvas" width="150" height="100" style="border:1px dotted;float:left">Canvas alt text</canvas>
</foreignObject>
</g>
</svg>
<p>
<button type="button" onclick="draw_box();return false">Animate</button>
</body>
</html>
The above page doesn't display the canvas at all in IE 11. In the latest version of Chrome it displays the canvas, but the effects of the JavaScript function called by the button - drawing the black box - only show up if you click on the SVG image.
What I need to know:
1) Is there something wrong with what I've written - e.g. am I missing some function call to make the SVG or foreignObject update after I have drawn on the canvas?
2) Is this a lost cause? Is the specification of <foreignObject> etc. immature enough that I could never be confident that this will work, even if we can control what browser the user views the document in? It's actually fine if this is the case because we can just say going forward that we need our graph library to generate SVG and not HTML.
Thanks a lot
I'm trying to make a very simple modification of a circle SVG. The script code should change the radius of the circle, but nothing seems to happen. (using the same format, I am able to change the color but none of the other elements of the circle).
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50" fill="red" id="cir"/>
</svg>
<script>
document.getElementById("cir").r = 2000;
</script>
</body>
</html>
"r" is no property of the element, it's an attribute. Use this:
document.getElementById("cir").setAttribute("r", 2000);
I have a requirement on page load I need to create an 'Image' attribute and append it to the svg element to start animation. However, I tried to create Image and associated animate element and attach it to the svg element.The image is getting displayed on the page however it is not getting animated.
Can any one pls help in this.
code added at
http://jsbin.com/dofun/1/edit?html,js,output
Thanks
Pavan Kumar
Setting a duration for an animation is mandatory. If you add
animate.setAttribute('dur', '3s');
it animates correctly for me provided I add an svg element with an appropriate id.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<svg width="100%" height="100%" id="svg_image"/>
</body>
</html>
body, html {
width : 100%;
height: 100%;
}
var img = document.createElementNS('http://www.w3.org/2000/svg','image');
img.setAttributeNS(null,'height','536');
img.setAttributeNS(null,'width','536');
img.setAttributeNS('http://www.w3.org/1999/xlink','href','https://upload.wikimedia.org/wikipedia/commons/2/22/SVG_Simple_Logo.svg');
img.setAttributeNS(null,'x','10');
img.setAttributeNS(null,'y','10');
img.setAttributeNS(null, 'visibility', 'visible');
img.setAttributeNS(null,'id','image_test');
// animate object
var animate = document.createElementNS('http://www.w3.org/2000/svg','animate');
animate.setAttributeNS(null,'attributeName','x');
animate.setAttributeNS(null,'from',500);
animate.setAttributeNS(null,'to',0);
animate.setAttribute('dur', '3s');
//append animate with image
img.appendChild(animate);
document.getElementById("svg_image").appendChild(img);
I'm messing around with SVG and I was hoping I could create SVG files in Illustrator and access elements with Javascript.
Here's the SVG file Illustrator kicks out (It also seems to add a load of junk to the beginning of the file that I've removed)
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="276.843px" height="233.242px" viewBox="0 0 276.843 233.242" enable-background="new 0 0 276.843 233.242"
xml:space="preserve">
<path id="delta" fill="#231F20" d="M34.074,86.094L0,185.354l44.444,38.519l80.741-0.74l29.63-25.186l-26.667-37.037
c0,0-34.815-5.926-37.778-6.667s-13.333-28.889-13.333-28.889l7.407-18.519l31.111-2.963l5.926-21.481l-12.593-38.519l-43.704-5.185
L34.074,86.094z"/>
<path id="cargo" fill="#DFB800" d="M68.148,32.761l43.704,4.445l14.815,42.963l-7.407,26.667l-33.333,2.963l-4.444,14.074
l54.074-1.481l22.222,36.296l25.926-3.704l25.926-54.074c0,0-19.259-47.408-21.481-47.408s-31.852-0.741-31.852-0.741
l-19.259-39.259L92.593,8.316L68.148,32.761z"/>
<polygon id="beta" fill="#35FF1F" points="86.722,128.316 134.593,124.613 158.296,163.872 190.889,155.724 214.593,100.909
194.593,52.02 227.186,49.057 246.444,92.02 238.297,140.909 216.074,172.761 197.556,188.316 179.778,169.798 164.963,174.983
163.481,197.946 156.815,197.946 134.593,159.428 94.593,151.279 "/>
<path class="monkey" id="alpha" fill="#FD00FF" d="M96.315,4.354l42.963,5.185l18.519,42.222l71.852-8.148l20.74,46.667l-5.926,52.593
l-24.444,34.074l-25.185,15.555l-14.074-19.259l-8.889,2.964l-1.481,22.222l-14.074,2.963l-25.186,22.963l-74.074,4.444
l101.481,4.444c0,0,96.297-17.777,109.63-71.852S282.24,53.983,250.389,20.65S96.315,4.354,96.315,4.354z"/>
</svg>
As you can probably see, each element has an ID, and I was hoping to be able to access individual elements with Javascript so I could change the Fill attribute and respond to events such as click.
The HTML is bog basic
<!DOCTYPE html>
<html>
<head>
<title>SVG Illustrator Test</title>
</head>
<body>
<object data="alpha.svg" type="image/svg+xml" id="alphasvg" width="100%" height="100%"></object>
</body>
</html>
I guess this is two questions really.
Is it possible to do it this way, as opposed to using something like Raphael or jQuery SVG.
If it is possible, what's the technique?
UPDATE
At the moment, I've resorted to using Illustrator to create the SVG file, and I'm using Raphaël JS to create paths and simply copying the point data from the SVG file and pasting it into path() function. Creating complex paths such as might be needed for a map, by coding the point data manually is (to my knowledge) prohibitively complex.
Is it possible to do it this way, as opposed to using something like Raphael or jQuery SVG?
Definitely.
If it is possible, what's the technique?
This annotated code snippet works:
<!DOCTYPE html>
<html>
<head>
<title>SVG Illustrator Test</title>
</head>
<body>
<object data="alpha.svg" type="image/svg+xml"
id="alphasvg" width="100%" height="100%"></object>
<script>
var a = document.getElementById("alphasvg");
// It's important to add an load event listener to the object,
// as it will load the svg doc asynchronously
a.addEventListener("load",function(){
// get the inner DOM of alpha.svg
var svgDoc = a.contentDocument;
// get the inner element by id
var delta = svgDoc.getElementById("delta");
// add behaviour
delta.addEventListener("mousedown",function(){
alert('hello world!')
}, false);
}, false);
</script>
</body>
</html>
Note that a limitation of this technique is that it is restricted by the same-origin policy, so alpha.svg must be hosted on the same domain as the .html file, otherwise the inner DOM of the object will be inaccessible.
Important thing to run this HTML, you need host HTML file to web server like IIS, Tomcat
In case you use jQuery you need to wait for $(window).load, because the embedded SVG document might not be yet loaded at $(document).ready
$(window).load(function () {
//alert("Document loaded, including graphics and embedded documents (like SVG)");
var a = document.getElementById("alphasvg");
//get the inner DOM of alpha.svg
var svgDoc = a.contentDocument;
//get the inner element by id
var delta = svgDoc.getElementById("delta");
delta.addEventListener("mousedown", function(){ alert('hello world!')}, false);
});
If you are using an <img> tag for the SVG, then you cannot manipulate its contents (as far as I know).
As the accepted answer shows, using <object> is an option.
I needed this recently and used gulp-inject during my gulp build to inject the contents of an SVG file directly into the HTML document as an <svg> element, which is then very easy to work with using CSS selectors and querySelector/getElementBy*.