Develop Reference

Image Loading detecting using Javascript

I have a lot of images (of 5 categories) in my website which make it load slowly.
I set every image with Attribute "data-src" containing its real source, and I update its source attribute with this "data-src" attribute for every image in this categroy (inside a for loop), whenever the relevant category is chosen (clicked).
HTML:
<img loading="lzay" class="post_image" data-src="https://i.ibb.co/FswR5KB/Pics-Art-06-22-07-48-49.jpg" src="https://i.ibb.co/FswR5KB/Pics-Art-06-22-07-48-49.jpg">
JAVASCRIPT:
for(i = 0; i< selection.length; i++){
let data_src = selection[i].children[2].getAttribute("data-src");;
selection[i].children[2].src = data_src;
}
How can I tell when all of the images of a category was loaded to the site?
(some code continue to run after the for loop is done, yet not all the images loaded and I wish the rest of the code will fire only after they are loaded to page).

Try this. I didn't have much time to come up with it, but it might work. Sorry if it doesn't.
index.html
<img id="img1" src="https://i.ibb.co/FswR5KB/Pics-Art-06-22-07-48-49.jpg"/>
<img id="img2" src="https://i.ibb.co/FswR5KB/Pics-Art-06-22-07-48-49.jpg"/>
<img id="img3" src="https://i.ibb.co/FswR5KB/Pics-Art-06-22-07-48-49.jpg"/>
<script type="text/javascript" src="script.js"></script>
script.js
const img1 = document.getElementById("img1");
const img2 = document.getElementById("img2");
const img3 = document.getElementById("img3");
const imgArray = [
img1,
img2,
img3
]
let imgsLoaded = 0;
for (let i = 0; i < imgArray.length; i++) {
imgArray[i].onload = function () {
imgsLoaded++;
}
if (imgsLoaded >= imgArray.length) {
// all images are loaded
}
}

display series of images on button click

is it possible to display 3 images one after another at each button click using a array in JavaScript?
I have an array called
var images = ["image1.jpg","image2.jpg","image3.jpg"]
The way I need the website to load is for the first picture to already be there. Then when I click on the button I want the next picture to be displayed however replacing the image that was there before. I want this to repeat throughout the entire, so when I click on the button, and if the image being displayed was image3, then image1 should be displayed.
I want to share the code I have so far however I don't know where to start. the only code i have is the layout and a variable.
var images = ["image1.jpg","image2.jpg","image3.jpg"]

Try like this.Use 'document.querySelector' do select your button.On clicking button appen images using forEach in body.
var button = document.querySelector('#show');//selects your button
button.addEventListener('click',function(){ // handle click event
var images = ["image1.jpg","image2.jpg","image3.jpg"];//array of valid images
images.forEach(function(image){
img = document.createElement('img');//creates a img element
img.src = image;//sets src of img tag
document.body.appendChild(img)//appends into body
});
});
<button id="show">
Show images
</button>

Pure JS solution.
var images = ["http://placehold.it/350x150", "http://placehold.it/250x150", "http://placehold.it/150x150"];
var elem = document.getElementById('img');
var i = 0;
window.onload = function() {
elem.setAttribute("src", images[i]);
}
elem.addEventListener('click', function() {
(i < images.length-1) ? i++ : i = 0;
this.setAttribute("src", images[i]);
});
<img src='' id='img'>
jQuery solution.
var images = ["http://placehold.it/350x150", "http://placehold.it/250x150", "http://placehold.it/150x150"];
var i = 0;
$(document).ready(function() {
$('#img').attr('src', images[i]);
});
$('#img').click(function() {
(i < images.length-1) ? i++ : i = 0;
$('#img').attr('src', images[i]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src='' id='img'>

querySelectorAll is not working with data-srcset

I want to apply a class to all the horizontal imgs on the website.
I'm trying to use this function below but it doesn't work.
Any help would be greatly appreciated.
$(function() {
var images = document.querySelectorAll('[data-srcset]');
for (var i = 0; i < images.length; i++) {
if (images[i].naturalWidth > images[i].naturalHeight) {
$(images[i]).addClass('horizontal');
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="https://cdn.pixabay.com/photo/2015/02/18/11/50/mountain-landscape-640617_960_720.jpg" alt=landscape>

That is because the data:... image you provide is 1x1 and so the check for images[i].naturalWidth > images[i].naturalHeight fails.
Keep in mind that if you use the srcset attribute (instead of data-srcset) which is the default it will work as expected (but you need to use the load event of the page).
$(window).load(function() {
var images = document.querySelectorAll('[srcset]');
for (var i = 0; i < images.length; i++) {
if (images[i].naturalWidth > images[i].naturalHeight) {
$(images[i]).addClass('horizontal');
}
}
})
.horizontal{border:10px solid OliveDrab;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" srcset="http://www.dummyimage.com/400x200" alt=landscape>
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" srcset="http://www.dummyimage.com/200x210" alt=landscape>

It's better to replace alt=landscape with alt="landscape".
both
var images = document.querySelectorAll('[data-srcset]');
and
var images = $('[data-srcset]');
works for me.
Your problem is if statement is not true. it's always go to else.
Try update your if statement by the following code.
if (images[i].naturalWidth > images[i].naturalHeight) {
$(images[i]).addClass('horizontal');
console.log(images[i]);
} else {
console.log('else');
}
You'll see that it's always go to else.

JavaScript Slideshow using onload and an image swapping function

My slideshow flips through images but one of them flips through the wrong image. Can someone please look through my code and find what I can't seem to find!Here is the html:
<div id="serv_tims">
<div id="serv_d"><img name='slide' src='http://jjoli.weebly.com/uploads/1/8/6/0/18608386/1651756_orig.png'/></div>
<div id="serv_t"><img name='slide2' src='http://jjoli.weebly.com/uploads/1/8/6/0/18608386/6848746_orig.png'/></div>
<div id="serv_m"><img name='slide3' src='http://jjoli.weebly.com/uploads/1/8/6/0/18608386/3044861_orig.png'/></div>
</div>
Here is the css:
#serv_tims{
border:solid 4px #0276FD;
height:300px;
width:300px;
position:static;
float:right;
clear:right;
margin:0 0.5% 0 0;
}
#serv_d,#serv_t,#serv_m{
height:100px;
width:300px;
}
Here is my javascript:
var i = 0;
var path = new Array();
path[0]="http://jjoli.weebly.com/uploads/1/8/6/0/18608386/1651756_orig.png";
path[1]="http://jjoli.weebly.com/uploads/1/8/6/0/18608386/6795103_orig.png";
path[2]="http://jjoli.weebly.com/uploads/1/8/6/0/18608386/8269055_orig.png";
function swapImage(){
document.slide.src = path[i];
if(i < path.length - 1){ i++;} else{i = 0;}
setTimeout("swapImage()",2000);
}
var j = 0;
var path2 = new Array();
path2[0]="http://jjoli.weebly.com/uploads/1/8/6/0/18608386/6848746_orig.png";
path2[1]="http://jjoli.weebly.com/uploads/1/8/6/0/18608386/5983713_orig.png";
path2[2]="http://jjoli.weebly.com/uploads/1/8/6/0/18608386/5808905_orig.png";
function swapImage2()
{
document.slide2.src = path[j];
if(j < path2.length - 1){ j++;} else{j = 0;}
setTimeout("swapImage2()",2000);
}
var k = 0;
var path3 = new Array();
path3[0]="http://jjoli.weebly.com/uploads/1/8/6/0/18608386/3044861_orig.png";
path3[1]="http://jjoli.weebly.com/uploads/1/8/6/0/18608386/3044861_orig.png";
path3[2]="http://jjoli.weebly.com/uploads/1/8/6/0/18608386/3044861_orig.png";
function swapImage3()
{
document.slide3.src = path3[k];
if(k < path3.length - 1){ k++;} else {k = 0;}
setTimeout("swapImage3()",2000);
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(swapImage);
addLoadEvent(swapImage2);
addLoadEvent(swapImage3);

Allright I can propose you very simple solution to create your own slideshow
firstly assume that we want to have 5 images in our slide Show .
<div id="main_frame">
<div id="slide_frame">
<div class="imdiv"><img src="1.jpg" class="imgs" /></div>
<div class="imdiv"><img src="2.jpg" class="imgs" /></div>
<div class="imdiv"><img src="3.jpg" class="imgs" /></div>
<div class="imdiv"><img src="4.jpg" class="imgs" /></div>
<div class="imdiv"><img src="5.jpg" class="imgs" /></div>
</div>
</div>
the most important thing is the frame must be overflow:hidden and for instance your the width
your each frame is 500px so the width of the mainframe must be 500px and the witdh of slide frame
must be 500*5=2500px allright
<style>
#main_frame {border:1pxsolid;black;width:500px;height:300px;overflow:hidden;position:relative;}
#slide_frame {border:0px solid transparent;width:2500px;height:300px;position:relative;}
.imgs {width:500px;border:0px;height:300px;position:relative;}
</style>
then you need to have the library of jquery
as:
you will add this library into head tags
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
then write this javascript code
<script type="text/javascript">
$(document).ready(function(){
var slide=500;
var counter=0;
setInterval(function(){
var s=slide*counter;
$("#slide_frame").animate({left:s},600);
counter+=1;
if(counter==5)
counter=0;
},500);
});
</script>
add this javascript code declared upward into head tag .you do not need to call it will start
automatically
Good Luck

I run your code in a fiddle and this is not an image slide show, those are just text. You shouldnt use those kinda concept with images. It'll only make things messy. Here an example for what youre trying to achieve.
<div id="serv_tims">
<div>SUNDAY<br>MORNING</div>
<div>10:00 AM</div>
<div>GOD<br>LOVES YA</div>
</div>
js:
var i = 1;
var text = [
["SUNDAY<br>MORNING","10:00 AM","GOD<br>LOVES YA"],
["SUNDAY<br>EVENING","05:00 PM","GOD<br>LOVES YA"],
["SUNDAY<br>NIGHT","11:00 PM","GOD<br>LOVES YA"]
];
var st = document.getElementById("serv_tims");
setInterval(function(){
for(var j = 0; j < 3; j++){
st.children[j].innerHTML = text[i][j];
}
i = (i < (text.length - 1)) ? (i + 1) : 0;
},3000);
As you can see, you can just edit text array whatever the way you need.
FIDDLE

I see my problem!
document.slide2.src = path[j];
should be
document.slide2.src = path2[j];
Sorry!

One more thing the code I wrote for you is static.If you want to have new images to your
slide shows
For instance the I wrote was only for 5 images.However you can add more.But in order to do
this, you need expand the width of slide_frame when you add a new image every time.And append
the image into slide_frame div.If you want further info I can send you a code snippet that I
had written before
Good Luck

How to hide all images using javascript?

I'm injecting JavaScript code into a website for personal use, using a Google Chrome extension... I'd like to hide all images before the page loads... I've got the script to run before anything loads, but can't seem to get the correct code to hide the array of images... something like:
function beforeload(){
document.getElementsByTagName('img')[0].style.display = "none"
}
Basically i want all the image tags to have style="display:none" added to the attributes. how do i do this?

You need to loop on them
var images = document.getElementsByTagName('img');
for (i = 0; i < images.length;i++ ) {
images[i].style.display = "none";
}

Amr has got the way to do it with javascript. If you add jquery to the page, it only takes one line
$('img').hide();

Below code will only hide images of all image elements
let images = document.getElementsByTagName("img");
let images_length = images.length;
for (let i = 0; i < images_length; i++) {
images[i].style.setProperty("display", "none", "important");
}
but what if images are displayed using CSS ?
Solution for all elements
let images = document.getElementsByTagName("img");
let images_length = images.length;
for (let i = 0; i < images_length; i++) {
images[i].style.setProperty("display", "none", "important");
}
/** now also hide images which are implemented in css */
let all_elements = document.querySelectorAll("*");
for(let i = 0 ; i < all_elements.length ; i++){
all_elements[i].style.setProperty("background-image","unset","important");
}
.image {
width : 100px;
height : 100px;
background-image : url(https://image.shutterstock.com/image-photo/aerial-view-main-faisal-mosque-600w-1242735640.jpg);
}
<img src="https://image.shutterstock.com/image-photo/aerial-view-main-faisal-mosque-600w-1242735640.jpg" width="100" height="100">
<div class="image"></div>
<div> To show images plz comment/remove js </div>

Check this out:
http://ncthakur.itgo.com/js09.htm
It's not exactly what are you looking for, but you can use some part of it.
It took me 7 seconds to find it on google ;)