I am trying to load an image from a url to check internet connectivity. When no internet connection, it should display a dojo warning dialog. This works for Firefox but does not for IE8.
Following is the code snippet:
var img = new Image();
img.src = userGuideUrl1_img + '?' + (new Date).getTime();
img.onload = function() {
window.open(userGuideUrl1);
}
img.onerror = function() {
dojo.addOnLoad(warningDialogFunc);
}
Here warningDialogFunc is a dojo object. Any thoughts?
Thanks
Could it be that the page is already loaded by the time the img.onerror handler is executed, and IE doesn't rexecute the function for the dojo.addOnLoad(warningDialogFunc)?
Try changing
img.onerror = function() {
dojo.addOnLoad(warningDialogFunc);
}
to simply:
img.onerror = function() {
warningDialogFunc();
}
You have to set up the handler before you set the source of image, when you change the src attribute, IE will try to download the image and trigger the events.
var img = new Image();
img.onload = function() {
window.open(userGuideUrl1);
}
img.onerror = function() {
dojo.addOnLoad(warningDialogFunc);
}
img.src = userGuideUrl1_img + '?' + (new Date).getTime(); // Trigger image download and the handlers.
Related
The code below works perfectly in browser, but not in Electron env.
function listenFileInput() {
fileInput.addEventListener('change', ev => {
startProgress();
const file = ev.target.files[0];
if (!file) return clearProgress();
loadImage(file);
});
}
function loadImage(file) {
const image = new Image();
image.onload = function() {
const src = cropImage(this);
cardImage.src = src;
clearProgress();
};
image.src = window.URL.createObjectURL(file);
}
function startProgress() {
fileBtn.setAttribute('disabled', true);
fileInput.setAttribute('disabled', true);
progress.style.display = 'flex';
}
function clearProgress() {
fileBtn.removeAttribute('disabled');
fileInput.removeAttribute('disabled');
progress.style.display = 'none';
}
In Electron env, when the file is loaded, the progress doesn't show up.
After do some tests, I found some interesting phenomenon:
If I comment the image.onload = function() {...} block, it works properly.
If I add alert() in onChange event callback or startProgress function, after alerting, the progress appears as expected.
If I comment clearProgress(); in image.onload callback, after the image was loaded, the progress appears.
So, it seems that the setAttribute and style.display didn't work (or Electron didn't re-render the page) until the image was loaded, unless there's an alert disturbs the process.
I've pushed the complete code to GitHub (/lib/file.js).
var image = new Image();
image.onLoad = function() {
alert("loaded");
}
image.onError = function() {
alert("not loaded");
};
image.src ="https://s3.amazonaws.com/profileImages.mySample.com/spiderman.png" //dummy URL for reference only.
This is my code.
I am fetching my images from amazon services, problem is that if I am getting some error like:
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>ABCDEFGHIJ</RequestId>
<HostId>
AABCDEFGHIJKLMNOPQRST
</HostId>
</Error>
then my code is not executing the image.onError().
how to check whether image exist at the URL ?
DEMO
var image = new Image();
image.onload = function() {
alert("loaded");
}
image.onerror = function() {
alert("not loaded");
};
image.src ="https://s3.amazonaws.com/profileImages.mySample.com/spiderman.png";
I have figured out how to preload images. What I am trying to find out now is whether there is any way, using Javascript, to get the local filepath where an image has been cached.
You can use a combination of FileReader and sessionStorage.
Something like:
var input = document.querySelector("#imageInput");
input.addEventListener("change", function(e){
var reader = new FileReader();
reader.onload = function(evt){
var newImage = document.createElement("img");
newImage.src = evt.target.result;
document.querySelector("body").appendChild(newImage);
sessionStorage.setItem("image", evt.target.result);
};
reader.readAsDataURL(e.target.files[0]);
}, false);
window.addEventListener("load", function(e){
if(sessionStorage.getItem("image")){
var newImage = document.createElement("img");
newImage.src = sessionStorage.getItem("image");
document.querySelector("body").appendChild(newImage);
}
}, false);
That would store all of your images on the browser and have them persist through posts and reloads. Then you can add any logic to edit them as you need.
Unfortunately, you can't set inputs of type "file" so you'll need to do some UI magic.
I want to create an alert box after an image is loaded, but if the image is saved in the browser cache, the .onload event will not be fired.
How do I trigger an alert when an image has been loaded regardless of whether the image has been cached or not?
var img = new Image();
img.src = "img.jpg";
img.onload = function () {
alert("image is loaded");
}
As you're generating the image dynamically, set the onload property before the src.
var img = new Image();
img.onload = function () {
alert("image is loaded");
}
img.src = "img.jpg";
Fiddle - tested on latest Firefox and Chrome releases.
You can also use the answer in this post, which I adapted for a single dynamically generated image:
var img = new Image();
// 'load' event
$(img).on('load', function() {
alert("image is loaded");
});
img.src = "img.jpg";
Fiddle
If the src is already set then the event is firing in the cached case before you even get the event handler bound. So, you should trigger the event based off .complete also.
code sample:
$("img").one("load", function() {
//do stuff
}).each(function() {
if(this.complete || /*for IE 10-*/ $(this).height() > 0)
$(this).load();
});
There are two possible solutions for these kind of situations:
Use the solution suggested on this post
Add a unique suffix to the image src to force browser downloading it again, like this:
var img = new Image();
img.src = "img.jpg?_="+(new Date().getTime());
img.onload = function () {
alert("image is loaded");
}
In this code every time adding current timestamp to the end of the image URL you make it unique and browser will download the image again
I have met the same issue today. After trying various method, I realize that just put the code of sizing inside $(window).load(function() {}) instead of document.ready would solve part of issue (if you are not ajaxing the page).
I found that you can just do this in Chrome:
$('.onload-fadein').each(function (k, v) {
v.onload = function () {
$(this).animate({opacity: 1}, 2000);
};
v.src = v.src;
});
Setting the .src to itself will trigger the onload event.
I have some javascript code that creates an img tag with a mouseover callback, and adds the img tag to the page. The problem is that a javascript syntax error happens (in the Firefox Console) whenever the callback is invoked.
This code demonstrates the problem...
var imgUrl = 'http://sstatic.net/so/img/logo.png';
var img = document.createElement('img');
img.setAttribute('src', imgUrl);
img.setAttribute('onmouseover', function() {
alert('mouseover ' + imgUrl);
});
document.body.appendChild(img);
The syntax error even happens when the callback function is an empty function.
Can anyone explain what's causing the syntax error and how to fix it?
(I'm using FF 3.5.2 on Win XP.)
You're passing in a function where a string is expected. Try this instead:
var imgUrl = 'http://sstatic.net/so/img/logo.png';
var img = document.createElement('img');
img.src = imgUrl;
img.onmouseover = function() {
alert('mouseover ' + imgUrl);
};
document.body.appendChild(img);