We Keep Coding

Swap an image without flicker while showing the new one immediately

TL;DR: Is there a way to swap the images reliably while showing whichever image is being loaded at the time without causing page flicker?
I have 2 images and 2 buttons and when I hover over one button it shows the one image. Hovering over the other button swaps to the second image. I was doing it like this:
$('#button1').mouseover(function() {
$('#image').attr('src', 'image1.png');
});
$('#button2').mouseover(function() {
$('#image').attr('src', 'image2.png');
});
This works fine but when the first image has loaded and the second hasn't, it doesn't show the second image until it has completed loading. To try to give the user some indication of when the new image is loading (which they're expecting to appear immediately), I forced it to add a null image before these swaps, like this:
$('#button1').mouseover(function() {
$('#image').attr('src', '#');
$('#image').attr('src', 'image1.png');
});
$('#button2').mouseover(function() {
$('#image').attr('src', '#');
$('#image').attr('src', 'image2.png');
});
This works great when one image is loading by showing the image as it's loading but now once both are loaded, the null image in between them causes a flicker when switching images. I thought I could fix this by turning the null image off once both images are loaded but that has turned out to be unreliable. Both $('#image').prop('complete') and imagesloaded as suggested in other locations on stackoverflow are inconsistent at noticing whether the image has been loaded or not. Detecting loaded images just seems to be a dead end.
I also considered trying to force the images to show and hide before and after they were created but this doesn't seem to work at all though I'm not sure why. The new one doesn't show while loading and I'm not sure if they're swapping properly:
$('#button1').mouseover(function() {
$('#image').hide();
$('#image').attr('src', 'image1.png');
$('#image').show();
});
$('#button2').mouseover(function() {
$('#image').hide();
$('#image').attr('src', 'image2.png');
$('#image').show();
});
Is there a way to swap the images reliably while showing whichever image is being loaded at the time without causing page flicker that I haven't tried?

What you're wanting to do is preload the images so that they are cached in the browser. then there's no delay on your mouse over. Here's a jquery plugin to cache the images and a call for them.
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
// Usage:
$(['image1.png','image2.png']).preload();
This is not my code: credit to James # Preloading images with jQuery

Try storing the sources of the image into JavaScript variables, and use those variables to swap the image sources.
This might avoid the loading, not sure, but it might.

Try this:
var preloadImages = ['image1.png', 'image2.png'];
$('#button1').mouseover(function() {
$('#image').attr('src', preloadImages[0]);
});
$('#button2').mouseover(function() {
$('#image').attr('src', preloadImages[1]);
});

The problem is having this HTML content updated by changing the src location makes the browser wait until the image is loaded before displaying the image. This doesn't seem to be modifiable.
The HTML:
<img id="image" src="">
and javascript with this behavior:
$('#button1').mouseover(function() {
$('#image').attr('src', 'image1.png');
});
$('#button2').mouseover(function() {
$('#image').attr('src', 'image2.png');
});
Changing the HTML:
<div id='image_container'> </div>
and javascript to:
$('#button1').mouseover(function() {
// Remove the old image and replace it with the new one
$('#image_container').empty()
.append("<img id='image' src='image1.png'>");
});
$('#button2').mouseover(function() {
$('#image_container').empty()
.append("<img id='image' src='image2.png'>");
});
makes the browser show the image while it is downloaded. I'm not exactly sure why but it seems to just be that new <img>s are handled differently than <img>s with src modifications.

JS load image on click

I need to load an image, js need to get link url and print this image on screen.
But it is not working.
What is wrong with my script? what can I do to make it work and improve it?
html
<div id=img></div>
<div id=loading></div>
<a href=http://png-5.findicons.com/files/icons/1580/devine_icons_part_2/128/my_computer.png class=postmini>Open image 1</a>
<br>
<a href=http://www.iconshock.com/img_jpg/BETA/communications/jpg/256/smile_icon.jpg class=postmini>Open image 2</a>
js
$(function() {
$(".postmini").click(function(){
var element = $(this);
var I = element.attr("href");
$("#loading").html('<img src="loader.gif" align="absmiddle"> loading...');
$("#loading").ajaxComplete(function(){}).slideUp();
$("#img").append(I);
});
});
https://jsfiddle.net/u6j2udzb/
and this loading div, what I need to do to make it work properly?

You are missing a lot and have a lot you don't need. I have commented out where you don't need items. In particular you don't need a loading because the image will be there before they see that. However, if you do want it still, you should be loading it underneath the image you are loading. So it gets covered by the image. I can update it with that if you'd like.
What you are missing is actual code to turn the href into an image source and you are not removing the default action of the anchor tag so it doesn't try loading a new page when clicked.
$(".postmini").click(function(event){
event.preventDefault();
var element = $(this);
var I = element.attr("href");
//$("#loading").html('loading...');
//$("#loading").ajaxComplete(function(){}).slideUp();
// remove old image if it is already there.
$("#img").empty();
// create variable holding the image src from the href link
var img = $("<img/>").attr("src", I)
$("#img").append(img);
});
https://jsfiddle.net/3g8ujLvd/

You just have to insert an img tag into your "display div" on click on the link... to load the image... (btw your syntax errors are terrible... you have to use quotes for attributes^^)
like this for example :
$('.postmini').on('click',function(){
//do something
});
Check this : https://jsfiddle.net/u6j2udzb/8/
(done quickly for example)
Hope it helps

You are not running an ajax script. ajaxComplete is only fired after an ajax script completed.
Whenever an Ajax request completes, jQuery triggers the ajaxComplete
event. Any and all handlers that have been registered with the
.ajaxComplete() method are executed at this time.
You should ad an ajax script and than ajaxComplete will run if you registered the ajaxComplete method.

At the moment you're just placing the text from the "href" attribute on the link into the div. You need to either create an image or use the link provided as a background.
The quickest way to see this is to change make this change:
var element = $(this);
var I = element.attr("href");
$("#loading").html('<img src="loader.gif" align="absmiddle"> loading...');
$("#loading").ajaxComplete(function(){}).slideUp();
// $("#img").append(I);
$("#img").html("<img src='"+I+"' />");

$('.postmini').on('click',function(e){
e.preventDefault();
$('#loading').html('<img src="'+this.href+'">').children('img').one('load',function(){$(this).parent().slideUp('slow');});
});
Noticed I used on instead of click this allows you to use this.href rather than a more lengthy $(this).attr('href'). I also used .one on a child image element to find out if the image has loaded.
But I've just realised that this is useless because you want to have a loader. Ma bad.
$('.postmini').on('click',function(e){
e.preventDefault();
//best have the loader.gif showing on default before the load is complete.
var img=$('<img class="loadedImage">');
img.src=this.href;
//img.css({display:none;});//remove this if you've enter CSS .loadedImage{display:none;}
$('#loading').append(img).slideDown('slow',function(){$(this).children('.loadedImage').one('load',function(){$(this).fadeIn('slow');$(this).siblings('img[src="loader.gif"]').hide();});});
});
This method is what you're looking for. Basically you want to click the link, stop the default action of going to the link, make a new image element and set the src, make sure it's hidden before load, add the new image element to loading, slide up parent loading, check for load and fade in :)

Try and run this simple snippet
$('#myButton').click(()=>{
let imgUrl = $('#imgUrl').val();
$.get(imgUrl)
.done(() => {
$('img').attr('src', imgUrl);
$('#imgText').text('');
})
.fail(() => {
$('#imgText').text('Image does not exist');
$('img').attr('src', '');
})
})
img {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Image url: <input type="text" id="imgUrl" value="https://upload.wikimedia.org/wikipedia/commons/7/75/Woman_mechanic_working_on_engine_%28cropped%29.jpeg"><br>
<button id="myButton" type="button">click here to load image</button>
<div id="imgText"></div>
<img>

Jquery function not firing on initial load

I have a situation where I must wait for a Specific image to load, and then either swap out its src, or locate the next image and hide/show it.
What I need to happen is show a placeholder image (silhouette) until its main image is ready, and then hide the silhouette and show the main image. Very common stuff.
Problem is this jquery function does not fire on a new tab, or window... but if I hit f5 it works perfectly... but then again I open a new tab, and it wont fire until I hit f5.
CSS:
.staffImage1, .staffImage2, .staffImage3, .staffImage4, .staffImage5 { display: none; }
Jquery:
$('.staffImage1, .staffImage2,.staffImage3,.staffImage4, .staffImage5')
.load(function () {
$(this).next('.sillhouette').hide();
$(this).show();
console.log("function fired")
})
I get the log message only after refresh.
Something to be aware of is I am using the "First 14k" method to increase page speed, so maybe jquery just is not ready when the images are initially loaded the first time, but are cached and work after f5?
Each image must wait until its fully loaded, they are in a slider, so I need to show the first slides image as soon as its ready,I cannot wait until all 5 images are ready, as that would slow down the first slides image.
Any advice is appreciated, thank you

This structure:
$('.staffImage1, .staffImage2,.staffImage3,.staffImage4, .staffImage5').load(...)
does not work to notify you when all the images have been loaded. .load() only works on a single image at a time. And, if the images are cached, they may already have finished loading before your jQuery even runs so you would miss the load event entirely.
The simplest work-around is to use the window load event when all page resources have finished loading:
$(window).load(function() {
// all images are loaded here
});
It is also possible to monitor just those 5 images, but that is more work. I've written code to do this before so I'll see if I can find that prior code.
Here's a jQuery plug-in function that monitors just specific images. It will call its callback when all the images in the jQuery object are loaded:
// call the callback when all images have been loaded
// if all images are already loaded or there were no images in the jQuery
// object, then the callback will be called immediately
jQuery.fn.imgsLoaded = function(fn) {
var cntRemaining = 0;
function checkDone() {
if (cntRemaining === 0) {
fn();
}
}
function imgDone() {
--cntRemaining;
checkDone();
// remove event handlers to kill closure when done
$(this).off("load error abort", imgDone);
}
this.each(function() {
if (!this.tagName.toLowerCase() === "img" && !this.complete && this.src) {
++cntRemaining;
$(this).on("load error abort", imgDone);
}
});
checkDone();
return this;
}
You could use it like this:
$('.staffImage1, .staffImage2,.staffImage3,.staffImage4, .staffImage5').imgsLoaded(function () {
$(this).next('.sillhouette').hide();
$(this).show();
console.log("function fired")
});
Working demo: http://jsfiddle.net/jfriend00/zaoweyoo/

Write jquery code
'$(document).ready(function(){
//your code
});'

Running a check on content loaded in via a .load() function

had this niggling issue that i cant seem to figure out.
I have a blog post on a CMS that i am building and there is some content saved into a div with it own unique ID. When the user clicks an edit button, a CKeditor is shown (containing the same text as the div). I also display a save button which when clicked, calls the processing PHP script via AJAX.
On a database update success, i use this in my AJAX call:
if (response.databaseSuccess) {
$("#container #" +response.postid).load("#container #" +response.postContentID);
}
This works perfectly and loads the updated content into the div.
Now the issue...
On page load i use this:
$(document).ready(function () {
// check each image in the .blogtest divs for their width. If its less than X make it full size, if not its poor and keep it normal
function resize() {
var box = $(".blogtest");
box.find("img.buildimage").on('load', function () {
var img = $(this),
width = img.width();
if (width >= 650) {
img.addClass("buildimage-large");
} else if (width < 500 && width > 101) {
img.addClass("buildimage-small");
}
// if image is less than X, its most likely a smiley
else if (width < 100) {
img.addClass("buildimage-smiley");
}
}).filter(function () {
//if the image is already loaded manually trigger the event
return this.complete;
}).trigger('load');
}
resize();
});
This works, and checks the images for their width and acts accordingly. After the page has fully loaded the images correctly get given their new class which changes their width.
The problem is that i cannot get this function to work on the data that is saved. So when i click save and the content is loaded via .load(), the new images are not checked.
I have tried adding the above function into the AJAX success return but it doesnt do anything.
Any ideas?

If you are trying to hook into the onload event for images that have already been added to the page, it is very easy to miss the onload event, particularly if the image is already in the browser cache (and thus will load quickly) as the onload event may have already fired before you get a chance to attach your event handler. The usual work-around is to do something like this where you check to see if it's already loaded before attaching an onload handler:
box.find("img.buildimage").each(function() {
if (this.complete) {
// image already loaded so just process it here
} else {
// image not yet loaded so attach an onload handler
$(this).on("load", function() {
// now the image is loaded so process it here
});
}
});
I'm not sure exactly what code you're using to dynamically load new content. If you're doing that with Ajax, you need to make sure you don't fire the above code until after the content has been added to the page (the success or completion handler of whatever load operation you're using).
So, if this is where you're loading new content:
if (response.databaseSuccess) {
$("#container #" +response.postid).load("#container #" +response.postContentID);
}
then, you would use a completion handler callback on the .load() function to trigger the above code:
if (response.databaseSuccess) {
$("#container #" +response.postid).load("#container #" +response.postContentID, function() {
// code here that looks at the dynamically loaded content
});
}

Image load by jQuery

We have image and links in separate blocks.
When link is clicked, its href attribute puts to src of the image.
What I'm trying to do:
If image is not already loaded (not cached) {
fadeOut previous image {
fadeIn loader {
load image (when animation of loader ends) {
fadeOut loader {
fadeIn image
}
}
}
}
} else (if image is cached, do not show loader) {
fadeOut previous image {
fadeIn new image
}
}
Here is what I have: http://jsfiddle.net/EvXJr/13/
First part works, don't know how to code the second (else) part.
Please help.

The dirty way would be to assign ids to loaded images, if there is no element with such id on a page - show loader, else just animate image.
Example:
html:
<div id="container">
</div>
js:
$('#container').delegate('a', 'click', function () {
var sel_id = this.id;
if (!document.getElementById('img_' + this.id)) {
//create image with id like: sel_id = 'img_' + this.id
} else {
//just show image
}
});

Why don't you just keep track of what HREFs you have loaded with a javascript array that you have loaded and if your HREF can be found in the loaded array just take out the loader related functions.

Couldn't get the jsfiddle to load but if I understand correctly I would just set the background image of the element that holds the images to a loading gif then you don't have to worry about fading in and out a loader. If an image is already cached it will load so quickly you will never see the loading gif. And if it isn't and takes a while to load the user will see the loading gif and using the function below the image will fade in nicely once loaded.
And if you want to perform a function once an image has loaded use
$("img").load(function(){
//do stuff once image has loaded.
//for example
$(this).fadeIn("slow");
});