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).
Related
$(document).on('change', '#id_edit_profile_photo', e => {
uploadPhoto(avatarElem, previewPPContainer, avatarUploadElem)
});
function uploadPhoto(elem, preview, uploadElem) {
elem.addClass('d-none');
preview.removeClass('d-none');
preview.find('img').attr('src', '');
let blobUrl = URL.createObjectURL(uploadElem.files[0]);
preview.find('img').attr('src', blobUrl);
// call this fuunction after completing the above task
ImageLoaded();
}
function ImageLoaded() {
_IMAGE_WIDTH = $("#drag-image").width();
_IMAGE_HEIGHT = $("#drag-image").height();
_IMAGE_LOADED = 1;
alert('Image Loaded');
}
The uploadPhoto function runs when value of the file input tag #id_edit_profile_photo changes. Inside the uploadPhoto blobUrl variable stores the url of the loaded file. The url is then set to an img tag. How do I allow the ImageLoaded function to run only after the img tag has loaded the image.
Any help is appreciated.
Thank you.
I need to initialize cropper plugin in modal pop up. Whenever user click on image uploader I want to show that image in popup and it should initialize cropper plugin when modal pop up finishes its show animation as well as after image loaded completely.
Currently what is happening sometime initCroping function get called before image loaded and sometime it calls properly.
I want to call initCroping function after image loaded and after changing $("#crop-img") src, Finally it should check if modal pop up loaded completely then it should fire iniCroping function.
both events are unpredictable sometime modal pop up comes first sometimes image loads. I want to check both the event complete and then initCroping should call.
Is there any easy way to call function after these two events complete.
$('#cropModel').on('shown.bs.modal', function() {
//initCroping();
});
$(".upload").change(function(e){
var preview = $('#crop-img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.addEventListener("load", function () {
//preview.src = reader.result;
$(preview).attr("src",reader.result);
initCroping();
}, false);
if (file) {
reader.readAsDataURL(file);
}
});
simpliest method:
var counter = 2;
function fireInitCroping() {
--counter === 0 && initCroping();
}
$('#cropModel').on('shown.bs.modal', function() {
fireInitCroping();
});
$(".upload").change(function(e){
var preview = $('#crop-img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.addEventListener("load", function () {
//preview.src = reader.result;
$(preview).attr("src",reader.result);
fireInitCroping();
}, false);
if (file) {
reader.readAsDataURL(file);
}
});
With Screw-FileReader and a few promises works too
var shownPopup = new Promise(resolve =>
$('#cropModel').one('shown.bs.modal', () => resolve())
)
var loadedImage = new Promise((resolve, reject) => {
$(".upload").change(e => {
// create a new Image obj from Blob that resolves/reject onload or onerror
e.target.files[0].image().then(img => {
img.id = "crop-img"
$("#crop-img").replaceWith(img)
resolve()
} err => {
console.error('not an image')
reject(err)
})
})
})
// When both event's has fired then fire initCroping
Promise.all([shownPopup, loadedImage]).then(initCroping)
I try to place multiple images in my HTML, and manipulate them when they are all loaded.
But onload event is not firing in IE9 sometimes.
I set some console debug message, and found that if the readyState of image is loading when I register onload event, onload event will not fire.
Code snippet is as follows:
var loaded = function () {
// increate counter to make sure all images are loaded or not
};
var thumbnails = $('img');
thumbnails.each(function () {
console.log('this.readyState:'+this.readyState)
if (this.complete) {
loaded();
} else {
this.onload = loaded;
}
});
P.S. I don't want to use window.onload method, because my script may be a plugin, it will be insert someone's page.
try re-assigning the image source (src) to trigger the event, like:
var thumbnails = $('img');
thumbnails.each(function () {
var img = $(this);
console.log('this.readyState:'+this.readyState)
if (this.complete) {
loaded();
} else {
this.onload = loaded;
}
img.attr('src', img.attr('src'));
});
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 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.