I have a field and a container for an image.
In this container there is a default image.
I want the user to put a link of an image and then submit it, this then adds the image to the
src attribute of the default image.
My question, how should I load image, and during this time show a progress bar to the user, and after loading finishes, hide the URL. My main concern now is how to load the resource.
Now I have written this script:
jQuery("#logo-file-upload").on("click", function(){
// when user clicks the submit button
$("#url-logo-progress").show(); // show the progress bar to it
var logoUrl = $("#logo-url").val(); // pick up the inserted URL
$("#image-width").attr("src", logoUrl); // and put the URL into the src attribute of the image
});
Though I need something like this:
$.imageLoad({ url : "url/to/image.jpg",
complete : function(){
alert("upload finished!");
});
I have no problem to writen callbacks and status's, but I don't know how to load a resource.
Thanks in advance
You just miss the onload handler. When you set the src attribute on the image (the DOM image element), it begins loading the resource. When the resource is loaded, image will trigger the onload event.
So, instead of
jQuery("#logo-file-upload").on("click", function(){
// when user clicks the submit button
$("#url-logo-progress").show(); // show the progress bar to it
var logoUrl = $("#logo-url").val(); // pick up the inserted URL
$("#image-width").attr("src", logoUrl); // and put the URL into the src attribute of the image
});
do
jQuery("#logo-file-upload").on("click", function(){
// when user clicks the submit button
$("#url-logo-progress").show(); // show the progress bar to it
var logoUrl = $("#logo-url").val(); // pick up the inserted URL
var image = $("#image-width")[0];
image.onload = function(){alert("upload finished!");}
image.src = logoUrl; // and put the URL into the src attribute of the image
});
so that you're dealing with the reference to the Image DOM element directly, not with the jQuery reference. Of course, when the resource is loaded, you will have to hide the progress bar etc... not just alert the message.
Related
My page (built using wordpress) uses some jquery to show a modal when an image is clicked. The modal contains the image that was clicked and I used the below jquery to do this.
Trouble is that when the page is loaded, the first image click shows the modal but the src of the modal image hasnt been updated with the url of the clicked image.
It looks like the jquery hasnt run. Once the modal is closed and a new image is clicked it works.
The page does have lazy loading but the image says "loaded" in the image tag
Any ideas?
page link: https://www.musiciansforscreen.com/musicians/flavio/
.prof-image is the imafge the user clicks
.lightbox-image is the image in the modal
jQuery('.prof-image').click( function() {
var image = jQuery(this).attr('src');
jQuery('.lightbox-image').attr('src', image );
});
Ok I actually solved this by updating the code to change the "data-lazy-src" as well as the "src" attribute. The "data-lazy-src" attribute was cueing up the placeholder image so changing that sorted the issue.
your code does not run in the first time and then it runs in the second time because the modal was about "showing" and not "shown" yet ..
so that's why the ".lightbox-image" will be not used to set your image because it was not loaded yet in the dom (in the first step).
in that case you have to use the "on shown event" of the modal" , after that put your code insde .
look at this modal events
here is my code solution:
var lastImgSrc = null;
/** change #myModal to your modal id **/
jQuery('#myModal').on('shown.bs.modal', function (e) {
// if the modal is fully loaded and the lastImgSrc is not null, set the src url with the wanted value.
if(lastImgSrc){
jQuery('.lightbox-image').attr('src', lastImgSrc );
}
});
jQuery('.prof-image').click( function(e) {
e.preventDefault();
lastImgSrc = jQuery(this).attr('src');
jQuery('#myModal').modal('show'); // show modal manually
});
jQuery('#myModal').on('hidden.bs.modal', function (e) {
lastImgSrc = null; // if modal closed then reset the variable;
})
I have a form to upload images. By default the source is "images/noimage.png";
<img id="previewing" src="images/noimage.png" />
I store the path in the database. If I select a specific user and the form gets loaded I want to display the image for the specific user. I do this in the windows.onload event. However another image (previous image the user had, if user had one) gets loaded instead of the new one.
var Logo = 'Logos/123.png'; //path stored in Database
if (Logo!='') {
//If the user has a 'Logo', show it
$("#previewing").prop("src", Logo);
} else {
// if user has no 'Logo', show default image
$("#previewing").prop("src", 'Images/noimage.png');
}
This does not work as expected. What's wrong here?
If after reloading image getting change then most probably its Caching issue.
you may try adding some random string into image URL like
Logos/123.png?v=xyz
I have an application form that shows an image on the left part and some input texts on the right part. The users will have to fill the input texts and click next to show the next image. The problem is that the images are big and it is taking a long time to load and it is time consuming.
What I want to do is when the user starts filling the form from the first image for example, I want to start downloading the next image with ajax asynchronously, by the time the user finishes working on the first image the next image will be downloaded to the client, and when the user clicks next, the browser will show the next image, and so on.
I tried this code but it is not working as I explained. The page is waiting until the both images are loaded then it is showing the first image, any help would be appreciated:
HTML
<img id="currentImage" src="currentImage.png" onload="currentImageLoad()"></img>
<img id="nextImage" style="display: none;"></img>
Javascript
function currentImageLoad(){
$('#nextImage').attr('src' , 'nextImage.png');
}
javascript is synchronous. You can delay the loading of the second image to prevent this:
function currentImageLoad(){
setTimeout(function() {
$('#nextImage').attr('src' , 'nextImage.png');
}, 10); // 10ms
}
You can lazy load the image using jquery unveil plugin.
http://luis-almeida.github.io/unveil/
This is what you need, it's not complicated. JQuery is only used here for simplified selecting / DOM Manipulating.
<!-- click this button to append the image to #image-frame -->
<button id="append-image">append image</button>
<!-- image will go here -->
<div id="image-frame"></div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function(){
// 1. create a image object and load the image file (this will display nowhere)
var image_url = 'https://image.spreadshirtmedia.net/image-server/v1/compositions/123658308/views/1,width=300,height=300,version=1472099537/evil-maenner-premium-t-shirt.jpg',
image = new Image();
image.src = image_url;
// 2. create a new <img> element and append to the frame
// (the image will load from cache if the previous download is finished, or load from remote if it's not)
$('#append-image').on('click', function(e){
e.preventDefault();
$('<img src="'+image_url+'">').appendTo($('#image-frame'));
});
});
</script>
I am trying to solve a riddle here. Imagine the following. The user uploads one image, which a minute later he wants to replace. Thus he clicks on the image and selects the upload button again, chooses another image and uploads it. In the editor this image is shown, but when he saves the change, the old image is shown again.
My guess is, that this is due to the fact that only the src-attribute gets updated, but not the data-cke-saved-src-attribute. The question now is: How do I change that?
I should also mention, that since I have a blur-handler, that is asking the user if he wants to discard the change. This fires whenever an dialog opens, which is why I am "refocusing" the editor using the following snippet:
CKEDITOR.on('dialogDefinition', function (e) {
var dialog = e.data.definition.dialog;
dialog.on('hide', function () {
dis.ckEditor.focusManager.hasFocus = true;
$('.cke').show();
});
});
I want an image, which is not clicked after 5 seconds, to turn into another image, which then returns to the original image when clicked.
So
image > (user not clicked on image after 5 secs) > image prompting user to click > (user clicks) > image back to original.
Any ideas?
Sure, not a problem. You can do it with the following code:
HTML
<img id="clickable" src="http://fullahead.org/gallery/toronto-2010/image/thumb/DSC_3356.jpg" style="cursor: pointer" title="Clicky!"/>
Javascript
// Get a reference to the image and save its original source
var img = document.getElementById('clickable');
var origSrc = img.src;
// Create the timeout to change the source (2 seconds in code below)
var timeout = setTimeout(function(){
img.src = 'http://fullahead.org/gallery/ilse-de-grand-calumet-2010/image/thumb/DSC_3163.jpg';
}, 2000);
// Register the click event handler for the image and clear the timeout
img.onclick = function(){
clearTimeout(timeout);
this.src = origSrc;
}
You can see it in action here.
This is very easy with jquery
what we will do is: when the document is ready, get all the images with class "promptimage", set a timer on them, when timer passes -> change their source to another source, and when it is clicked, set it to default src.
$(function(){
var original_src = $('.promptimage').attr("src");
$('.promptimage').attr("src",'set your image source with the prompting image').delay(800);
$('.promptimage').click(function(){
$('.promptimage').attr("src",original_src);
});
});
I'm not sure exactly where you are having problems so I'll give a general overview of what I think is needed:
Image should have an onclick event that can determine when it has been clicked. This can set a flag and reset the image if necessary. It can also cancel the timer in the next step if it is still running.
On page load set a 5 second timer. Once that is up run a function that checks if the image has been clicked. If it hasn't change the image. If it has do nothing.
I'd suggest search or reasking a new question on specific bits you are having problems with.