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';
Related
When I am Uploading a file using the FileReader library the first time it's uploaded on the first click but the second time it is uploaded when I click on the button second time I am attaching a video link in which you can see the problem and attaching the code as well.
https://drive.google.com/file/d/1OzJLCA7URBcRy_5m_QVWAiLzo8l9eoqd/view
const imgPreviewing = (selected) => {
let img = myImgElement
if (selected.files && selected.files[0]) {
var reader = new FileReader();
reader.onload = function () {
let src = reader.result;
img.setAttribute("src", src);
};
reader.readAsDataURL(selected.files[0]);
}
};
Thank You.
I dynamically set image and audio sources when window/document is already loaded, e.g. I set them after user performs some manipulations on the page:
// image and audio set
jQuery("#image").css('background-image', 'url(../content/icons/1/18.png)').css('backgroundPosition', '0 -40px');
var myAudio = new Audio('http://domain/content/audio/1/full-18.mp3');
myAudio.pause();
// i want this part of code be executed only when images and audio is fully loaded
myAudio.play();
Solution number 1, isn't working
jQuery("#page").load(function() {});
Solution number 2, isn't working
jQuery(window).load(function() {});
Any other idea how to this can be solved? Thank you in advance
You need to specifically target the image element to check if it has loaded.
$('#image').load(function () {
console.log('image loaded');
});
To check if the audio element is ready to be played you need to use onloadeddata.
var myAudio = new Audio('http://www.mfiles.co.uk/mp3-downloads/edvard-grieg-peer-gynt1-morning-mood.mp3');
myAudio.onloadeddata = audioIsLoaded();
function audioIsLoaded() {
console.log('audio is loaded');
}
Run the below code snippet to see this in action.
$('#image').load(function() {
alert('image loaded');
});
var myAudio = new Audio('http://www.mfiles.co.uk/mp3-downloads/edvard-grieg-peer-gynt1-morning-mood.mp3');
myAudio.onloadeddata = audioReady();
function audioReady() {
alert('audio ready');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image" src="http://armpit-wrestling.com/wp-content/uploads/2016/06/bret-hart.jpg">
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
When I load a sound file with Javascript, the file seems to load from remote server each time. Is it possible to cache the file once loaded? I would like to load once and play as required.
var soundEmbed = null;
function playSound()
{
var myWAVfile = "myfile.wav";
if (soundEmbed)
{
document.body.removeChild(soundEmbed);
}
soundEmbed = document.createElement("embed");
soundEmbed.setAttribute("src", myWAVfile);
soundEmbed.setAttribute("hidden", true);
soundEmbed.setAttribute("autostart", true);
document.body.appendChild(soundEmbed);
}