Develop Reference

Load specific image, then load the entire page

I have a background image and lots of product image. Shortly, %88 of entire page is image. But when i refresh the page. Some products are displaying. After that my background is coming. Then other divs, images are coming.
What i want to do is my background images comes first. Then others are must be displayed. Sync or async it is not important.
What i tried:
i replaced my background image div to the top of the dom. Not worked.
window.onload=function () {
document.getElementById("theBackgroundImage").style.visibility = "visible";
}
Not worked also.
I tried several things before. But i have still same issue.

First of all, you will need to detect when all your images are loaded. Or preferably when all the images you want displayed first.
Then i see two options here. For both, i'm going to use a library that helps in detecting when images have been loaded : https://imagesloaded.desandro.com/
1st option
Just display your image.
imagesLoaded( 'img', function() {
document.querySelectorAll(".displayAfter").forEach(e => e.style.visibility = 'visible'
)
});
.displayAfter {
visibility : hidden;
}
<script src="https://unpkg.com/imagesloaded#4/imagesloaded.pkgd.min.js"></script>
Image here :
<img width="50px" height="50px" src="https://picsum.photos/50/50?random" />
Lazy loaded image here :
<img class="displayAfter" width="50px" height="50px" src="https://picsum.photos/50/50" />
2nd option
Do not load your image first (for instance src empty or pointing to blank image) then change the src attribute of your image. Here i use a data-src attribute in the image that i simply insert into the image src attribute once all the other images are loaded.
imagesLoaded( 'img', function() {
document.querySelectorAll(".displayAfter").forEach(e =>
e.setAttribute('src', e.getAttribute('data-src'))
)
});
<script src="https://unpkg.com/imagesloaded#4/imagesloaded.pkgd.min.js"></script>
Image here :
<img width="50px" height="50px" src="https://picsum.photos/50/50?random" />
Lazy loaded image here :
<img class="displayAfter" data-src="https://picsum.photos/50/50" width="50px" height="50px" />

Try to move the following to top in your css file
#theBackgroundImage{
background : url(..)
}
and maybe you need to use (Lazy Loading Images) => url

Load external photo with javascript

I am trying to set the image source of an image object with javascript.
I have tried
<img src="" id="image" alt="">
<p id="change">Change</p>
$("#change").click(function () {
$("#image").attr("src", "some source");
});
The problem is that it seems it does change the src, but it doesn't work if the image wasn't loaded when the page loaded. So I cannot suddenly change to the logo of Stackoverflow. Can this be true? How can I then load the image while changing the source?

I had an issue similar to this a couple weeks ago, the easiest way I managed to solve the issue was by loading all image's you will need, and set all of the ones you don't need right away as hidden. Then when your action that causes the change is triggered, you can change the image visibility on the one you want to disappear and the one you want to be shown.
If you have bootstrap installed, it is as easy as adding and removing a class via jQuery
HTML
<img src="" id="image1" alt="">
<img src="" id="image2" alt="" class="hidden">
<p id="change">Change</p>
Javascript
$("#change").click(function () {
$('#image1').addClass('hidden');
$('#image2').removeClass('hidden');
});

Onclick view large image javascript or CSS3

I have code something like this
<img width="250" height="220" src="img/port1.png" class="wp-post-image" alt="1" />
View Large Image
<img width="250" height="220" src="img/port1.png" class="wp-post-image" alt="1" />
View Large Image
<img width="250" height="220" src="img/port1.png" class="wp-post-image" alt="1" />
View Large Image
When we click on view large image link , Image should be display large and not disturb other images location.

http://lokeshdhakar.com/projects/lightbox2/releases/lightbox2.6.zip
PART 1 - GET SETUP
1.Download and unzip the Lightbox from above.
2.Look inside the js folder to find jquery-1.10.2.min.js and lightbox-2.6.min.js and load both of these files from your html page. Load jQuery first:
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
3.Look inside the css folder to find lightbox.css and load it from your html page:
<link href="css/lightbox.css" rel="stylesheet" />
4.Look inside the img folder to find close.png, loading.gif, prev.png, and next.png. These files are used in lightbox.css. By default, lightbox.css will look for these images in a folder called img.
------------------------------------------------------------------------------------------
PART 2 - TURN IT ON
1.Add a data-lightbox attribute to any image link to activate Lightbox. For the value of the attribute, use a unique name for each image. For example:
image #1
Optional: Set the title attribute if you want to show a caption.
2.If you have a group of related images that you would like to combine into a set, use the same data-lightbox attribute value for all of the images. For example:
image #2
image #3
image #4

I am usually using the fancybox jQuery plugin for these purposes. You can use the old free 1.34 version for simple purposes too, no need for pro license. You can also find a lot of examples etc. on the linked site.

preload elements with none displaying div

i want to preload all my Elements before manipulating them with jquery and co.
i considered that i could make a div with display: none and put all elements in there which im using for my site.
<div id="preload" style="display: none">
<img src="1.png" />
<img src="bla.gif" />
<img src="another_one.png" />
<img src="cutelittlekitten.png" />
</div>
and then this to fade in my site.
$('#preload img').load(function() {
/* Site fades in all elements are preloaded */
});
is there any disadvantage to do it like that? and if, why and maybe another better solution?
edit: i would like to pre-cache the images!

Disadvantage is you're making people wait. Just lazy load your images instead - any image above the fold you use a legit src attribute, and any image below the fold, you do something like this:
<img class="lazyload" src="images/clear.gif" data-src="path/to/real/image.jpg" />
Then you could use a plugin like this or write your own to fade in images with the class 'lazyload' on scroll if they appear in the visible window region:
http://www.appelsiini.net/projects/lazyload
You could also simply lazy load all those images on window.load so they'll begin to fade in after the above-the-fold images are visible and ready.

jQuery image gallery (need how to make the big image clickable)

im using the "CREATE IMAGE GALLERY IN 4 LINES OF JQUERY" (link below), which works just fine.
But i like to make the large images clickable (not just the thumbs), so that when i click on which ever image that is showing as the large image, another bigger version of the image opens in a new window.
http://workshop.rs/2010/07/create-image-gallery-in-4-lines-of-jquery/
Any ideas is greatly appreciated. Thank you.

You can wrap the large image in an anchor element:
<div id="panel">
<a href="images/image_01_largest.jpg" target="_blank">
<img id="largeImage" src="images/image_01_large.jpg" />
</a>
<div id="description">First image description</div>
</div>
This follows the convention that one image comes in three sizes: *_thumb.jpg, *_large.jpg, and *_largest.jpg. All you need to do now is change anchor's href attribute when changing #largeImage's src.
$('#thumbs img').click(function(){
$('#largeImage').attr('src', $(this).attr('src').replace('thumb', 'large'));
$('#largeImage').parent().attr('href', $(this).attr('src').replace('thumb', 'largest'));
$('#description').html($(this).attr('alt'));
});

Hi you may try with the Pretty photo plugin for displaying the gallery in the light box. Demo for Preety Photo.This may help you