Load image using Javascript? - javascript

Here's the current code of my HTML page:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
<meta name="robots" content="noindex, nofollow">
<meta http-equiv="refresh" content="3;URL='http://google.com'" />
</head>
<body>
<script>
var image = document.images[0];
var downloadingImage = new Image();
downloadingImage.onload = function(){
image.src = this.src;
};
downloadingImage.src = "http://example.com/pixel";
</script>
<script>
window.location = "http://google.com";
</script>
</body>
</html>
This part of the code should be using Javascript to load an image:
var image = document.images[0];
var downloadingImage = new Image();
downloadingImage.onload = function(){
image.src = this.src;
};
downloadingImage.src = "http://example.com/pixel";
This is being done to verify is a user has javascript enabled or not. We direct visitors to specific advertisers and certain ones require that Javascript be enabled. The pixel that's being loaded is so we can track fraudulent traffic from third-party vendors that try to send millions of bot hits using stuff like curl.
The amount of users with javascript enabled is slightly lower than I expected and I'm not trying to debate the amount. But does anyone see anything wrong with this code?
It's my understanding that javascript loads in order, so the image should be loaded in a browser before the user is redirected, correct? And do you see anything wrong in the code that I guess would cause it to not load in certain browsers?

While the script is executed in order, the loading of images is non-blocking. As a result, setting the image.src to something does not wait for that image to load before moving on. You need to determine when you'd like to be redirected, and place that code inside the image's onload function. Try this:
Wrap your refresh tag in <noscript></noscript> (only valid for html5)
Modify your code to this:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
<meta name="robots" content="noindex, nofollow">
<noscript>
<meta http-equiv="refresh" content="3;URL='http://google.com'" />
</noscript>
</head>
<body>
<img src="//example.org/pixel1">
<script>
var image = document.images[0];
var downloadingImage = new Image();
downloadingImage.onload = function(){
console.log('downloadImage loaded');
image.onload = function(){
console.log('image loaded');
window.location = "http://google.com";
}
image.src = this.src;
};
downloadingImage.src = "//example.com/pixel2";
</script>
</body>
</html>

Related

i cannot upload an image through an array (javascript)

this is my js code
const imgSrcs = [
'C:\Users\obito\OneDrive\Desktop\To-Students\4.jpg',
'C:\Users\obito\OneDrive\Desktop\To-Students\5.jpg',
'C:\Users\obito\OneDrive\Desktop\To-Students\6.jpg'
];
const img = document.querySelector('img');
img.src =imgSrcs[Math.floor(Math.random() * imgSrcs.length)];
and this is my html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript: DOM</title>
<link rel="stylesheet" href="css5.css">
<script defer src="ex5.js"></script>
</head>
<body>
<figure id="header">
<img src="#" alt="#">
</figure>
</body>
</html>
i am trying to make this page everytime you reload it a random picture from the array pops up
this only worked for me if i try to link an image through a website url or somthing
but when i try to get images from my pc and use the folderpath to reach the image this never works
and i keep getting this msg in the console
tar5.html:1 Not allowed to load local resource: file:///C:/UsersobitoOneDriveDesktopTo-Students%06.jpg
any idea why this is happening?
Use relative path. If your html is in folder To-Students and your images in To-Students/images then use const imgSrcs = ['images/4.jpg', 'images/5.jpg', 'image/6.jpg']
remove the defer on your script and have
window.addEventListener("load",function() {
const img = document.querySelector('img');
img.src =imgSrcs[Math.floor(Math.random() * imgSrcs.length)];
})
I think It's because the javascript cannot access to C (because it needs that administrator accept the javascript)

How to set redirect to links provided by JS function

I'm having an issue where I'm trying to set a page's redirect destination to a URL from a JS function.
I've tried calling the function by using <meta http-equiv="refresh" in the header, but I either have the syntax wrong or <meta> simply doesn't allow for calling functions. I'm honestly not sure.
<head>
<script src="extFile.js"></script>
<meta http-equiv="refresh" content="1; go2();" id="levP" name="levP">
<title>SO Question</title>
</head>
go2() is a function from extFile.js which contains an if/then statement that provides different URLs depending on time of day. I'd like to have index.html redirect users via function go2() either by a method in the header or in the body.
If this should be handled in the body then I'd appreciate any feedback as to how that should look.
Like this? this code will redirect your page after 5 seconds
<head>
<script src="extFile.js"></script>
<script>
setTimeout(function (){
window.location = "https://stackoverflow.com/questions/57717282/how-to-set-redirect-to-links-provided-by-js-function";
}, 5000);
</script>
<title>SO Question</title>
</head>
if you want a to call a function do this:
<head>
<script src="extFile.js"></script>
<script>
var check = function(){
window.location = "https://stackoverflow.com/questions/57717282/how-to-set-redirect-to-links-provided-by-js-function";
}
check();
</script>
<title>SO Question</title>
</head>

How to automatically refresh external data loaded into Javascript variables in HTML?

I have digital information written as Javascript variables by PHP into a .txt-File. This information gets changed by a user at a different interval.
var ISTUHSXDATE8 = '21.1.2018';
var ISTUHSXTIME8 = '20:11';
var ISTUHSXROT8 = 0;
var ISTUHSXGELB8 = 0;
var ISTUHSXGRUEN8 = 1;
var ISTUHSXAUSLASTUNG8 = '0%';
To show actual information in the HTML body, it´s necessary to make the HTML document load the latest version of .txt from server. [At the moment handmade by push the button and in webprojekt by setInterval() automatically]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv='cache-control' content='no-cache'>
<script type="text/javascript" id="id_of_java_var"></script>
</head>
<body>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var dsts = new Date();
document.getElementById("id_of_java_var").src =
"https://www.juh-technik.de/StreifenstatusEA1.txt?time" + dsts.getTime();
}
</script>
</body>
</html>
With this code I can load latest version from the server for several .gif/.jpg/.html files by pushing the refresh button. The Problem is, this don´t works with .txt-files.
So my question is, how to refresh src of following line without page reload.
<script src="https://www.juh-technik.de/StreifenstatusEA1.txt" type="text/javascript" id="id_of_java_var"></script>
Thanks for your help :-)

SVG embed not loaded or unaccessible via contentDocument

I've been struggling for... hours on a simple problem even though it seems to have been described here :How to access SVG elements with Javascript
I can't access elements of an external svg file loaded in a embed tag, even if I wait for the div or the whole window to load (I've tried several "load listeners")
I've simplified my html file into those fewlines to show you the issue :
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Desperate demo</title>
</head>
<body>
<div id="content">
<embed class="emb" id="maptest" type="image/svg+xml" src="star.svg">
</div>
<script type='text/javascript'>
window.onload = initAll;
function initAll(){
var mySVG = document.getElementById("maptest");
var svgDoc = mySVG.contentDocument;
console.log(svgDoc);
}
</script>
</body>
</html>
Basically, the log returns "null" or "undefined" on contentDocument property call, as if there was no svg at all loaded in the DOM.
Can you see what did I miss ? It doesn't work either if I write the whole svg tag in my html instead of calling an extern file...
Try getSVGDocument() and see if it helps you:
window.onload = initAll;
function initAll(){
var mySVG = document.getElementById("maptest");
console.log(mySVG);
var svgDoc = mySVG.getSVGDocument();
console.log(svgDoc);
}

HTML5 Canvas with Javascript , Image loading

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Web Game </title>
</head>
<body onkeydown="keyDown(event)" onkeyup="keyUp(event)"></body>
<canvas id="gameCanvas1" width=600 height=400 style ="position:absoloute:top:0;left:0;background-image:url('img/background.jpg')">
Please upgrade your browser to support HTML5.<br/>
One recommendation is to install the latest Chrome or Firefox.
</canvas>
<script>
gamecanvas = document.getElementById("gamecanvas1");
ctx=gamecanvas.getContext("2d");
var img = new Image();
img.src = "img/left.png";
//MainLoop
MainLoop();
function MainLoop(){
grafx.drawImage(img,0,0)};
setTimeout(MainLoop, 1000/60); //about 60fps
}
</script>
</html>
I am trying to load the left.png image. I am making a basic platformer in HTML and JavaScript, but the image isn't being shown. I think the drawImage is being called before the image is loaded but I'm not sure how to fix it. Thanks.
There are two problems I found.
P1:
grafx.drawImage(img,0,0)}; is wrong
it should be
ctx.drawImage(img,0,0);
P2:
use image onload callback rather than setTimeout.
img.onload = function () {
ctx.drawImage(img,0,0);
};
You have several errors in your js code.
your element has an id of gameCanvas1, but you are trying to get an element with an id of gamecanvas1 (document.getElementById("gamecanvas1");)
So the javascript wont find your canvas, which means the image wont be drawn. You also have an extra closing } which is causing errors in your function
Try opening your browsers dev console, you'll see the issues
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Web Game </title>
</head>
<body onkeydown="keyDown(event)" onkeyup="keyUp(event)"></body>
<canvas id="gameCanvas1" width=600 height=400 style ="position:absoloute:top:0;left:0;background-image:url('img/background.jpg')">
Please upgrade your browser to support HTML5.<br/>
One recommendation is to install the latest Chrome or Firefox.
</canvas>
<script>
console.log("i am here ");
var gamecanvas = document.getElementById('gameCanvas1');
var ctx=gamecanvas.getContext('2d');
var img = new Image();
img.src = "img/left.png";
//MainLoop
MainLoop();
function MainLoop(){
ctx.drawImage(img, 10, 10);
setTimeout(function(){
MainLoop();
}, 1000/60); //about 60fps
}
</script>
</html>

Categories