I am trying to delay the loading of images using plain JS. my method to do this is by giving empty src field for the image and inserting the image url into a temp attribute called "lang" as used in the example below. ie >
<img lang="logo.gif"> instead <img src="logo.gif">. When pressing a button the js below is initiated to insert into src attr the value of the dummy "lang" attr.
function showimagesunderdiv(divid)
{
tr = document.getElementById(divid);
pics=tr.getElementsByTagName('img');
for(i=0;i<pics.length;i++)
{
if(pics[i].lang)
{
pics[i].src=pics[i].lang;
pics[i].style.display='';
}
}
}
While this works is Chrome and FF, IE is doing problems. Any idea?
Maybe this:
<html>
<body>
<p>Images:</p>
<img name=image0>
<img name=image1>
<img name=image2>
<img name=image3>
End of document body.
</body>
<script type="text/javascript">
function LoadImage(imageName,imageFile)
{
if (!document.images) return;
document.images[imageName].src = imageFile';
}
LoadImage('image4','number4.gif');
LoadImage('image5','number5.gif');
LoadImage('image6','number6.gif');
LoadImage('image7','number7.gif');
</script>
</html>
Or this:
<html>
<body>
<p>Images:</p>
<img name=image0 onLoad="LoadImage('image1','number1.gif')">
<img name=image1 onLoad="LoadImage('image2','number2.gif')">
<img name=image2 onLoad="LoadImage('image3','number3.gif')">
<img name=image3>
End of document body.
</body>
<script type="text/javascript">
var loadingImage = false;
function LoadImage(imageName,imageFile)
{
if ((!document.images) || loadingImage) return;
loadingImage = true;
if (document.images[imageName].src.indexOf(imageFile)<0)
{
document.images[imageName].src = imageFile;
}
loadingImage = false;
}
LoadImage('image0','number0.gif');
</script>
</html>
I know it is not a correction of your code but I cant see whats wrong...
This is a very compatible solution!
Hope it helps! resource:
http://www.cryer.co.uk/resources/javascript/script3.htm
Give each image tag an ID, store the IDs and URLs in an array:
imagesToLoad = [["imgId1", "http://..."], ["imgId2", "..."], ...];
And use:
function showimages(imageList)
{
for(var x = 0; x < imageList.length; x++) {
document.getElementById(imageList[x][0]).src = imageList[x][1];
}
}
showImages(imagesToLoad);
Related
I am trying to create an Image Swap with Javascript. Can anyone point me in the direction of where my coding error is in JavaScript? Am I using the getElementByID incorrectly? Any help or direction is much appreciated!
<title>Photo Gallery</title>
</head>
<header>
<h1>Gallery</h1>
<div>
<img alt="images" src="Skelton_ImageSwap/images/Lilly.jpg"
style="height: 350px; width: 350px" id="Lilly">
</div>
</header>
<body>
<img src="Skelton_ImageSwap/images/Lilly.jpg" alt ="images" id ='Lilly' onclick.changeImage()>
<img src ="Skelton_ImageSwap/images/Lotus.jpg" alt = "images" id='Lotus' onclick.changeImage()>
<img src="Skelton_ImageSwap/images/Roses.jpg" alt="images" id='Roses'onclick.changeImage()>
<img src="Skelton_ImageSwap/images/Tulip.jpg" alt="images" id='Tulip'onclick.changeImage()>
</body>
<script>
function changePicture()
{
if (image.getElementByID.onclick.changePicture == "Lilly")
{
image.src = "Skelton_ImageSwap/image/Lilly.jpg";
}
if (image.getElementByID.onclick.changePicture == "Orchid")
{
image.src = "Skelton_ImageSwap/image/Orchid.jpg";
}
if (image.getElementByID.onclick.image == "Roses")
{
image.src = "Skelton_ImageSwap/image/Roses.jpg";
}
else
{
image.src = "Skelton_ImageSwap/image/Tulip.jpg";
}
}
</script>
On your img tags the onclick function is not wrote correctly should look like
onClick="changeImage()"
Also "changeImage" is not a function you wrote a function called "changePicture" so it should really look like
onClick="changePicture()"
Now in your changePicture function there are a few issues specifically the getElementById function is not being used correctly also you got the name wrong on it you capitalized the 'D' at the end which shouldn't be, I would recommend changing the id on your header tag img from 'Lilly' to 'preview' since element id's need to be unique and you've already used 'Lilly' as an id than replace your script tag with this
<script>
document.getElementById("Lilly").addEventListener("click", function(){
document.getElementById("preview").src = "Skelton_ImageSwap/image/Lilly.jpg"
});
document.getElementById("Lotus").addEventListener("click", function(){
document.getElementById("preview").src = "Skelton_ImageSwap/image/Lotus.jpg"
});
document.getElementById("Roses").addEventListener("click", function(){
document.getElementById("preview").src = "Skelton_ImageSwap/image/Roses.jpg"
});
document.getElementById("Tulip").addEventListener("click", function(){
document.getElementById("preview").src = "Skelton_ImageSwap/image/Tulip.jpg"
});
</script>
This issue has shown up in the latest version of Chrome (74.0.3729.108). This is unique to the local filesystem, as I have other ways of loading up neighboring documents in iframes when the app is on a server.
In my app, we have been able to load up documents from the filesystem with JavaScript by writing iframes to the DOM, and then having the document in the iframe write it's innerHTML to sessionStorage. Once the iframe is done loading, we catch that with the onload attribute on the iframe and handle getting the item written to sessionStorage.
I have narrowed this down to some bare-bones code and found that this works only on the first try, and then any tries after the first fail.
Here is a minimal HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Chrome iFrame Tester</title>
<script src="iframe-load.js"></script>
</head>
<body onload="OnLoad()">
<div id="result"></div>
</body>
</html>
Here is the JavaScript:
var urls = ['file://C:/Users/afrench/Documents/Other/Misc%20Code/Chrome%20iFrame/Doc1.html',
'file://C:/Users/afrench/Documents/Other/Misc%20Code/Chrome%20iFrame/Doc2.html'];
HandleLoad = function () {
'use strict';
var data;
try {
data = window.sessionStorage['data'];
delete window.sessionStorage['data'];
} catch (ignore) {
// something went wrong
}
var container = document.getElementById('container');
window.document.body.removeChild(container);
if (data !== null && data !== undefined) {
var resultContainer = document.getElementById('result');
resultContainer.innerHTML += data;
}
if (urls.length > 0) {
OnLoad();
}
}
function OnLoad() {
var url = urls[0];
if (url) {
urls.splice(0, 1);
var container = document.createElement('div');
container.id = 'container';
container.style.visibility = 'hidden';
window.document.body.appendChild(container);
container.innerHTML = '<iframe src="' + url + '" onload="HandleLoad();"></iframe>';
}
}
In the filesystem, we have the HTML written into index.html, and right next to it are two minimal HTML files, Doc1.html and Doc2.html. Their contents are both identical except the identifying sentence in the body's div:
Neighbor document HTML:
<!DOCTYPE html>
<html>
<head>
<title>Chrome iFrame Tester</title>
<script>
function OnLoad() {
try {
window.sessionStorage['data'] = window.document.body.innerHTML;
} catch {
// no luck
}
}
</script>
</head>
<body onload="OnLoad()">
<div>This is Doc 1's content!</div>
</body>
</html>
When this is run, we should see the content HTML of the two neighbor documents written to the result div in index.html.
When I run this minimal example, I can see that the content is successfully written to sessionStorage and then to the DOM for the first document, but the next try fails. What can I do to get it to work consistently, and what is happening here that it fails?
I'm not sure what is causing the weird behavior, so hopefully someone else can provide some insight on what exactly is going on here.
In the meantime, here is an alternative solution using window.postMessage:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Chrome iFrame Tester</title>
<script src="iframe-load.js"></script>
</head>
<body onload="OnLoad()">
<div id="result"></div>
</body>
</html>
iframe-load.js
var urls = ['file://C:/Users/afrench/Documents/Other/Misc%20Code/Chrome%20iFrame/Doc1.html',
'file://C:/Users/afrench/Documents/Other/Misc%20Code/Chrome%20iFrame/Doc2.html'];
window.addEventListener('message', event => {
'use strict';
var data = event.data;
var container = document.getElementById('container');
window.document.body.removeChild(container);
if (data) {
var resultContainer = document.getElementById('result');
resultContainer.innerHTML += data;
}
if (urls.length > 0) {
OnLoad();
}
})
function OnLoad() {
var url = urls.shift();
if (url) {
var container = document.createElement('div');
container.id = 'container';
container.style.visibility = 'hidden';
window.document.body.appendChild(container);
container.innerHTML = '<iframe src="' + url + '"></iframe>';
}
}
Doc1.html
<!DOCTYPE html>
<html>
<head>
<title>Chrome iFrame Tester</title>
<script>
function OnLoad() {
window.parent.postMessage(window.document.body.innerHTML, '*');
}
</script>
</head>
<body onload="OnLoad()">
<div>This is Doc 1's content!</div>
</body>
</html>
I have the following little script that seems to work but two of the images appear broken. They load when I right click and load as new tab:
var target = document.getElementById('target');
var counter = 0;
var myPictures = [
'https://media.giphy.com/media/3ohhwJax6g4Y8BK30k/giphy.gif',
'https://media.giphy.com/media/3o7aD5tv1ogNBtDhDi/giphy.gif',
'https://media.giphy.com/media/1nkUav308CBws/giphy.gif'
];
function nextPic() {
counter += 1;
if (counter > myPictures.length -1) {
counter = 0;
}
target.src = myPictures[counter];
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img id="target" src="https://media.giphy.com/media/1nkUav308CBws/giphy.gif" width="107" height="98" />
<input type="button" onclick="nextPic()" value="change image" />
</body>
</html>
Just move this line inside your nextPic() function so you don't try to grab that div before it gets loaded in the DOM.
function nextPic() {
var target = document.getElementById('target');
...
Sometimes <script defer> will automagically wait for the DOM to load, sometimes it doesn't. It's JavaScript. It is what it is.
defer
This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded. This attribute must not be used if the src attribute is absent (i.e. for inline scripts), in this case it would have no effect. To achieve a similar effect for dynamically inserted scripts use async=false instead.
Here's a good backstory on script loading.
var target = document.getElementById('target');
var counter = 0;
var myPictures = [
'https://media.giphy.com/media/3ohhwJax6g4Y8BK30k/giphy.gif',
'https://media.giphy.com/media/3o7aD5tv1ogNBtDhDi/giphy.gif',
'https://media.giphy.com/media/1nkUav308CBws/giphy.gif'
];
function nextPic() {
counter += 1;
if (counter == myPictures.length -1) {
counter = 0;
}
target.src = myPictures[counter];
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img id="target" src="https://media.giphy.com/media/1nkUav308CBws/giphy.gif" width="107" height="98" />
<input type="button" onclick="nextPic()" value="change image" />
</body>
</html>
this works on a button click and that is how it is meant to be. The problem lies in the fact that it uses hidden images, instead of images stored in an array. Could you please show me how to do it so that it is images stored in an array.
<!doctype html>
<html>
<body>
<div id="splash">
<img src="TrafficLightRed.gif" alt="" id="mainImg">
</div>
<div id="wrapper">
<div>
<button id="clickme" onclick="changeLight();">Click to change</button>
<img src="TrafficLightRed.gif" hidden>
<img src="TrafficLightYellow.gif" hidden>
<img src="TrafficLightGreen.gif" hidden>
</div>
</div>
<script>
function changeLight() {
var currentImg = document.getElementById("mainImg");
for(var i=1;i<3;i++) {
if(document.images[i].src == currentImg.src) {
currentImg.src = document.images[i + 1].src;
return;
}
}
currentImg.src = document.images[1].src;
}
</script>
</body>
</html>
You would store the image's src in an array:
imagesArray = ["TrafficLightRed.gif","TrafficLightYellow.gif","TrafficLightGreen.gif" ];
And use the array in place of document.images[i + 1].src:
...
for(var i=0;i<imagesArray.length;i++) {
if(imagesArray[i] == currentImg.src) {
currentImg.src = imagesArray[i];
return;
}
}
...
This should do the work:
...
<script>
var images = ["TrafficLightRed.gif", "TrafficLightYellow.gif", "TrafficLightGreen.gif"];
var currentIndex = 0;
function changeLight() {
var currentImg = document.getElementById("mainImg");
currentImg.src = images[(currentIndex++) % images.length];
}
</script>
...
Now you can add more images to array images and it will automatically loop through this array.
but it return empty alert box.. pls anyone help me.
I need alertbox with detail of iframe src(address location, http://www.google.com) value.
<iframe width="700px" height="900px" name="ifrm" id="ifrm" onload="load()"></iframe>
<script type="text/javascript">
function load()
{
var oIframe = document.getElementById("ifrm");
var oDoc = oIframe.contentWindow || oIframe.contentDocument;
if (oDoc.document) {
oDoc = oDoc.document;
}
alert(oDoc.ifrm.href);
}
</script>
Use the src attribute of the iframe
alert(oDoc.ifrm.src);