Should this work?
<script type=text/javascript>
function load_i () {
img = new Image();
img.onload = load_e();
img.src = "whatever.jpg";
}
function load_e() { alert("loaded"); }
</script>
Right now the image gets loaded, but apparently the onload event isn't being triggered.
Tried it in FF and Chrome.
change:
img.onload = load_e();
to:
img.onload = load_e;
With the following line:
img.onload = load_e();
You're calling load_e and assigning the result, undefined, to img.onload.
Related
I'm using Sweetalert2 to display a modal that has an image inside. Although it works fine, the modal without the image shows for a split second before the image appears. How can I wait until the image fully loads. Here's what I've tried that doesn't work: (loadPage is called when the page loads.)
function loadPage() {
var img = new Image();
img.onload = function () { setTimeout(function () { getToast(); }, 5000); }
img.src = "Images/Save.png";
}
function getToast() {
const Toast = Swal.mixin({
toast: false,
showConfirmButton: true,
confirmButtonText: 'close',
timer: 6000,
imageUrl: 'Images/Save.png',
timerProgressBar: true,
title: 'My message.',
})
Toast.fire({
})
}
The way you're doing it should just work without any flicker. The image is downloaded, cached and on the subsequent requests it should be served from cache. I created a fiddle and could not reconstruct your described issue.
Although I created an alternative approach saving the downloaded image as an dataURI and passing it to your SweetAlert instance. This way you can prevent accidentally downloading the image multiple times.
function loadPage() {
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function() {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var dataURL;
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage(this, 0, 0);
dataURL = canvas.toDataURL('canvas');
setTimeout(function () { getToast(dataURL); }, 1000);
canvas = null;
};
img.src = 'http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png';
}
function getToast(dataURL) {
const Toast = Swal.mixin({
toast: false,
showConfirmButton: true,
confirmButtonText: 'close',
timer: 6000,
imageUrl: dataURL,
timerProgressBar: true,
title: 'My message.',
})
Toast.fire({
})
}
loadPage()
Also see the attached fiddle for a working example: https://jsfiddle.net/4sza8u2m/
If I use a named function instead,it does do well :
<script type="text/javascript">
window.onload = function(){
var img = document.getElementById('im');
img.onload = fun();
}
function fun()
{
alert("Image loaded");
}
</script>
<img src="picture.png" id="im"/>
But, my question is that when I try to do the same by using an anonymous function(as shown below),why does it not work?
<script type="text/javascript">
window.onload = function(){
var img = document.getElementById('im');
img.onload = function(){
alert("Image loaded");
}
}
</script>
<img src="picture.png" id="im"/>
In your first example fun is called when the event handler is attached to the image (after the image has loaded).
In your second example, the anonymous function is attached to the image after the image has loaded.
To see the behaviour you want, try:
<script type="text/javascript">
window.onload = function(){
var img = document.getElementById('im');
img.onload = fun;
img.src = "picture.png";
}
function fun()
{
alert("Image loaded");
}
</script>
<img id="im"/>
or
<script type="text/javascript">
window.onload = function() {
var img = document.getElementById('im');
img.onload = function(){
alert("Image loaded");
}
img.src="picture.png"
}
</script>
<img id="im"/>
or
<script type="text/javascript">
function fun()
{
alert("Image loaded");
}
</script>
<img id="im" src="picture.png" onload="javascript:fun();"/>
I am loading in browser cache next page with:
new Image().src = 'HTML_URL';
How do I control end of loading? If loading NOT an image -- always calling onerror.
I can't use jQuery.
Use onerror callback.
var image = new Image();
image.src = 'HTML_URL';
image.onerror = function () {
alert('I failed');
}
I am using HTML5 file reader api to show the image preview before uploading the image to server but the problem is when i upload a tiff format image the on load image event is not triggering please see the code below
$('#file').on('change', function (e) {
if (window.FileReader) {
var reader = new FileReader();
reader.readAsDataURL(e.target.files[0]);
reader.onload = function (e) {
var image = new Image;
image.src = e.target.result;
image.onload = function () {
alert();
};
};
} else {
alert('FileReader API is not supported in your browser, please use Firefox, Safari, Chrome or IE10!')
}
});
http://jsbin.com/qajexuwe/1
While I am loading a File into the browser I want to show an animated loading gif to the user. But if the file is very big the browser seems so buisy, that the animation of my gif does not work. What can I do to visualise the loading?
HTML
<img id="loader" src="img/load.gif" />
JS
reader.readAsDataURL(file);
reader.onloadend = function(){
document.getElementById('loader').style.display='none';
var source = reader.result;
document.getElementById('img').setAttribute( 'src', source);
}
document.getElementById('loader').style.display='block';
In theory, what you have should work, as the read operation is asynchronous. Maybe it's the onloadend callback that is blocking the execution. In any case, you could try this:
reader.onloadend = function(){
document.getElementById('loader').style.display='none';
var source = reader.result;
document.getElementById('img').setAttribute( 'src', source);
}
document.getElementById('loader').style.display='block';
// Make sure to start loading only after the loader was displayed
// (give the browser a chance to repaint)
setTimeout(function() {
reader.readAsDataURL(file);
}, 40);
The loaded event should be hooked first. Try this:
reader.onloadend = function(){
document.getElementById('loader').style.display='none';
var source = reader.result;
document.getElementById('img').setAttribute( 'src', source);
}
reader.readAsDataURL(file);
document.getElementById('loader').style.display='block';