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>
Related
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 a main page with a number of buttons. When a button is pressed the target page is loaded as an object within a div on this main page where target is the page to be displayed within the object.
<script>
.... check which button is pressed and assign path to target
var objectContent = "<object type=\"text/html\" data=\"" + target + "\" height=\"500px\" width=\"100%\" style=\"overflow:auto; min-height:400px;\"></object>";
document.getElementById('content').innerHTML = objectContent;
</script>
html
<div id='content'>
</div>
All works and the target page loads fine within the main page div.
Sometimes it can take a while to load the content and so I would make use of a loading gif. I have been using one on whole pages but I would like one just on the content within the div.
In a target page I have the following to display the loader:
<script>
$(".loader").fadeIn("fast");
</script>
and this to hide it once the page is loaded
<script>
$(document).ready(function(){
$(".loader").hide();
});
</script>
This is not working. The page loads fine but no loading gif. No errors.
If I debug in the browser I see the gif as I step through so it must be loading and hiding, but not when I load the page normally. I suspect it is loading too late or hiding too soon.
Does my javascript show the loader as soon as the page starts to load? I have placed it at the beginning of the body.
Or is something I am doing to hide it before the page is fully loaded? Either way, can anyone see what I am doing wrong?
UPDATE AND ANSWER
Add the onload to the object tag as follows:
var out = "<object ... onload=\"contentLoaded(this)\"></object>";
<script>
function contentLoaded() {
$(".loader").hide();
};
</script>
Then why not leave the .loader element empty and do something like this
$('.loader').fadeIn('fast').html('<img src="loading.gif" />');
And this
$('.loader').hide().html('');
Is the trigger for the loading gif showing only within the loaded-in page?
If so, by the time the browser receives the instruction to show the loader, it's already fetched the data.
I imagine the majority of the time is spent waiting for the content so try showing the loader just before this happens:
document.getElementById('content').innerHTML = objectContent;
You could always create a localised loader image, set within the innerHTML, as you said you had a global one already.
is there any way that loading GIF image while onclick and simultaneously, navigation should happen.
i tried using jquery but loader animations are not happening while page navigates in some mobile browser, is there a solution using ajax to overcome that problem?
The best way to do is is to use AJAX to load new content. What you can do is have a button which when clicked clears the html of the initial page and reloads content for the other html page.
Lets say you have the page's HTML contents in a div called #div and there's a button called #button which when clicked takes you to the new page. What you can do now is that whenever #button is clicked, you can clear the HTML contents of the current div, load the HTML of the new page (and while it loads you can display the GIF image) and then populate the div with the HTML of the new page.
$("#button").click(function() {
//till the time the post function below doesn't return the following image will be displayed
$("#div").html('<img src = "images/ajax-loader.gif" />');
$.post("get_html.php", function (data) {
//get the new HTML content
$("#div").html(data);
});
});
This is just an example, if you are more specific in what you need, maybe I could write code suited to your needs.
I am trying to see if this javascript code for an image gallery as the option to click on the image to view next. Currently it is only set to go to the next image by clicking on the next/prev buttons. Any thoughts?
Source:
http://threepointmotors.com/lytebox.js
Example:
http://threepointmotors.com/NewsandEvents/CurrentNews/2012/smartElectricDriveCollection/tabid/226/Default.aspx
I see your page has the jQuery library included already, so it should be an easy task.
$('body').on('click', '#lbImage', function() { //when display image is clicked
if ($('#lbNext2_Off').is(':hidden')) //check if it isn't the last image
myLytebox.changeContent(myLytebox.activeSlide + 1); //move to next image
});
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.