Develop Reference

Text load after image has loaded

I have an image in which I have to display text from the database using PHP, but when the page loads the text appears first and the image is displayed later, is there a way that I can make the image load first and text later?

Assuming the image isn't set initially, just give it a load handler, and when triggered, apply the text in question:
<span id="my-element" data-text="php-text-here">
img.addEventListener('load', () => {
const myElement = document.querySelector('#my-element');
myElement.textContent = myElement.getAttribute('data-text');
});

Get Isotope to not load specific images at all

I'm working with Isotope and I have a lot of images in it.
The problem is that when visiting my one page website from a smartphone it takes quite a bit to load the page as isotope load all the images thumbnails as soon as isotope itself loads.
So, basically I want to hide/not load all the images that mustn't be shown if it's category isn't clicked and what I did was use two workarounds:
set the figure to display:none so that it doesn't show the void where it was supposed to be and the other images can actually occupy that space
set the img src to about:blank so that it doesn't load until it's category is clicked
then when the link "Click me!"(category) is clicked the figure gets set to display:block and the img src gets replaced by the real image path.
style:
#showfigure{
display:none; !important
}
body:
Click me!
<figure id="showfigure" class="filter imgtoshow">
<img id="showimg" src="about:blank" alt="">
</figure>
script:
<script>
function showAll() {
document.getElementById("showfigure").style.display = 'block';
$("#showimg").attr("src","example.jpg");
};
</script>
Now, the only way I got it to work with multiple figures/images was giving each figure and image it's own id (showfigure1, showfigure2, showfigure3 etc... and showimg1, showimg2, showimg3, etc...) as using the same id only works for the first figure/img in the code.
Am I missing something?
I tried replacing the path of the img src like this:
http://jsfiddle.net/F6Gds/28/
But I can't get it to do the same with the onclick function from the link "Click me!", and anyways there's the same problem with the ids.
Thanks in advance for any help!

Using JavaScript to dynamically change display style in img tags

I show links to 240 images on a page. The real images are uploaded by users. I tried to avoid showing an empty image if users did not upload it yet. jQuery did not work for me because of conflicts, so I have to do it in pure JavaScript.
image(s) links:
<img class="photo240" src="http://www.example.com/i/%%GLOBAL__AuthorID%%/p/b01.jpg" onerror="imgError()">
My JavaScript:
function imgError()
{
alert('The image could not be loaded.');
var _aryElm=document.getElementsByTagName('img'); //return an array with every <img> of the page
for( x in _aryElm) {
_elm=_aryElm[x];
_elm.className="photo240off";
}
}
The style photo240off equals to display:none.
Right now, whenever an image misses, all the images are turned to style photo240off and I want only the missing image to be hidden. So there is something wrong with my script.
(the overall script works well, because I get the alert).

Use this to get the image with the error.
Change to:
onerror="imgError(this)"
Then the function can be:
function imgError(el) {
alert('The image could not be loaded.');
el.className = "photo240off";
}

You need to reference the image from your onerror call and change the class only for that one.
Something like this:
HTML
<img class="photo240" src="example.jpg" onerror="imgError(this)">
JS
function imgError(el) {
el.className="photo240off";
}

How to make a loading image while waiting for image to load in firefox

I'm having this issue with firefox, works perfectly on chrome.
I'm creating a slide gallery, and the user can click next or previous to switch between the images in the gallery. I'm trying to create a loading image in-between switching images while the user is waiting for the actually image to loading. The code I have currently to do this as follows:
function changePicture()
{
var imagevar = document.getElementById('theimage');
//display loading image
imagevar.src = "/img/LoadingPage.png";
//Load actual Image
var imgURL = <IMAGE PATH>
imagevar.onload = ShowImage(imgURL);
}
function ShowImage(imgURL)
{
var imagevar = document.getElementById('theimage');
imagevar.src = imgURL;
}
So the logic in there is pretty simple. Load the "Loading Image" when switching between images, when the "Loading Image" has finished loading then start loading in the "Actual Image". When the actual image is completed loading then it should be displayed.
In firefox all that happens is that the image will hang on the previous image while the next image is loading and when the next image is loaded it will display the new image. But the "Loading Image" never gets displayed/shown.
I've also tried to just out right hide the image until it is loaded and on the onLoad unhide it again. But all that happens is the Image will just hang on the previous image until the current image is loading, never actually hiding the image.
And all of these techniques work perfectly fine on chrome. Can someone help me out on how to get this to work on firefox or knows of a better way?

The problem is that your logic is operating on the same image element. Loading images are supposed to be separate from the image that's used to display stuff.
Here's code that loads a new image on the image element, and while that happens,we display the loading image somewhere until the other loads.
function showGalleryImage(path){
//get our placeholder
var theImage = document.getElementById('theimage');
//show our loading image. usually overlaying theImage
showLoadingImage(true);
//set our handler to check if loaded
theImage.onload = function(){
//when loaded, hide
showLoadingImage(false);
}
//start loading the new image
theImage.src = path;
}
function showLoadingImage(state){
//get our loading image placeholder
var loadingImage = document.getElementById('loadingImage');
//set our display states
var displayState = state ? 'block' : 'none';
loadingImage.style.display = displayState;
}

Detect when a specific image has finished loading

I have an image on a webpage which is being dynamically generated by a server-side CGI program. Periodically this image is refreshed by a timer and/or changed based on user input. So I have a JavaScript function like
// <img id="screen" src=""> is elsewhere in the page
function reloadImage() {
$("#screen").attr("src", make_cgi_url_based_on_form_inputs());
}
This works just fine, but sometimes it takes awhile to load the image. So I'd like for some sort of message to appear that says "Loading image..." but then have that image disappear when the image has loaded and is being displayed in the browser.
Is there any kind of JavaScript event that can do this? Alternatively, is there any other way I can load/change/update an image and detect when the loading is finished, through Ajax or whatever else?

You can try out this jquery solution: http://jqueryfordesigners.com/image-loading/
$(function () {
var img = new Image();
$(img).load(function () {
//$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already
$(this).hide();
$('#loader').removeClass('loading').append(this);
$(this).fadeIn();
}).error(function () {
// notify the user that the image could not be loaded
}).attr('src', 'http://farm3.static.flickr.com/2405/2238919394_4c9b5aa921_o.jpg');
});