Develop Reference

How to lazy load images by class on click?

I have a lot of images on my webpage so I have used lazy loading to help with the performance. I have used one 25kb image as a place holder for all HD images. Normally while scrolling lazy load images display once they come into view, however the images are within a carousel and only the first images changes. I was hoping on click of a button which also displays the carousel I could load the new images by class?
<img src="./img/tinyBlur.jpg" data-2x-1="./img/design7.png" class="carosuelImg lazyload-2x loading-lazy hidden">

For what I understood, my friend
var img = document.querySelector("img");
img.classList.remove("hidden");
img.src = img.getAttribute('data-2x-1');

Clear main image in gallery on mouseout of thumbnail?

I'm using script found here:
Automatically load an image using javascript
I'm using them to build image gallery where the main image loads thumbnail image on mouseenter, but my main image begins blank not with the first thumbnail as in the answer. I need to know how to clear the main image back to blank on mouseout of each thumbnail?

Try JQuery .mouseout() like this:
$('.thumbnails img').mouseout(function () {
this.src = '';
});
Click http://jsfiddle.net/cnx65ev0/ to see it running. Hover over the images and when you leave them, they become blank. I hope this is what you wanted.

Background image spinner when not loaded

Using a div with
<div ng-style="{'background-image':'url('+image+')'}"></div>
I would like to show a spinner in the div while the background image has not yet been fully loaded. How is that possible? I want to use the background-image for displaying the image (and not the src) since I want to crop and center my images.

Set a 'loading' variable on your scope to true when loading and then false when loaded.
Use ng-class in the template to set the class with the background image when 'loading' e.g. ng-class="{'loading-class': loading} "
Use onloadeddata event Angular on video load event

Why the image is broken occasionally with the hover

$(function () {
$(".btn").on("mouseover",function(){
$(this).attr("src", $(this).attr("src").replace("images", "images/hover"));
});
$(".btn").on("mouseleave",function(){
$(this).attr("src", $(this).attr("src").replace("images/hover", "images"));
});
});
The above code is the way I change the image when the user hover on the button, when user click on it , it will redirect to other page. And the Html element is like:
<img class="btn" src="images/index_03.gif" />
The problem is , I am sure the path is correct , but when the user click on the button , during the time of loading the next page or in some case, when i hover on the image , the hovered image is not shown but broken link, why is it and how to fix it? Thanks for helping

$(this).attr("src", $(this).attr("src").replace("images/hover", "images"));
This code will reload the image, every time (or from cache).
So, during the page loading as other data is also loading at the same time, onhover image loading will be slow or broken.
I suggest you should load both images at the same time and at the same position and show/hide them on hover to get faster results.

Using CSS sprites instead of javascript calls will eliminate mouseover flickering, and reduce the total number of http requests required for your site (making it load faster).
You can achieve the same 'mouseover' functionality by using the css ':hover' pseudo element to alter the 'clip' property of the image (supported in IE6 and above).
Check out these CSS Tricks articles:
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them.
CSS Sprites with Inline Images

jQuery delay until background image is loaded, then faded in?

I've been doing alot of research and there are loads of plugins and tutorials out there that cover the use of large background images. Unfortunately, they all have one thing in common - they use absolutely positioned images to behave as "fake" background images.
Normally that would work fine for me and I've done that before, however, this project has a repeating background image, so it's necessary that I use normal CSS rules to declare the background image.
All of that being said, is there a way to check to see if the image is loaded and tell jQuery to fade this background image in once it is loaded? The main thing I'm looking for is a way for jQuery to verify that the image is actually loaded. If not, then I suppose I need to settle for a simple static delay (which unfortunately ruins the effect for users who have slow connections).
Last thing - can this be done via CSS class switching/toggling so that I can change the body class before and after the image is loaded? This would be a fallback for users without javascript and would make it so I don't have to .hide() my entire body while the background image loads.
*EDIT: This thread seems to have a similar discussion but I don't think it's quite the same thing: How do I delay html text from appearing until background image sprite is loaded? *
* EDIT 2 *
Looks like the above thread worked after all, except I'm still missing the fadeIn effect. I set the fadeIn intentionally high and it's not animating for some reason, any ideas why?
<script>
$(function() {
// create a dummy image
var img = new Image();
// give it a single load handler
$(img).one('load',function() {
$('html').css('background','url(<?php bloginfo( 'template_url' ); ?>/images/red_curtain.jpg) top center repeat-y').fadeIn(12000); // fade in the elements when the image loads
});
// declare background image source
img.src = "<?php bloginfo( 'template_url' ); ?>/images/red_curtain.jpg";
// make sure if fires in case it was cached
if( img.complete )
$(img).load();
});
</script>

This seems an old thread but I found a solution for this.
Hope it can help:
$(window).load(function(){
$('<img/>').attr('src', 'images/imgsrc.png').load(function() {
$('#loading').fadeOut(500);
$('#wrapper').fadeIn(200);
});
});

Use $(document).load() to achieve what you want.
"I set the fadeIn intentionally high and it's not animating for some reason, any ideas why?"
It is, just before the page has loaded

Add display: none; to your body tag
<body style="display: none">
Then with jQuery modify your code so it looks like this:
$(img).load(function(){
$("body").show();
});
Now page content will only show after img loading is complete.

To check when the image is loaded, declare another, "regular" image (i.e. the <img> tag) with the same src and attach event handler to it. Browser won't load the same image twice, so that event will also mean that the background is loaded.
Another trick I can propose is to go back to "fake" background. In order to make it "tile", you can create an iframe, stretched to cover the whole body, and having that image as background, and then fade that iframe as you like, while the rest of the page remains safely in the "main" frame.