prevent images being loaded until click - javascript

I currently have a list of images and text, we have about 1000 images so the page load is slow.
I have a hide and show function that only loads the next three when clicked using js slice method.
My images are loaded from wp php loop, I cant use Ajax due to server limitations, is there a simple way to not load the images until the user clicks the button ?
Question
My question is how do I prevent all images from being loaded until the users clicks the button to show the next 3 images
I have tried
$(".secondary-card").each(function() {
var obj = $(this);
obj.data("objsrc", obj.attr("data-src"));
obj.hide().attr("data-src", "").before("<span class=\"loading\">loading . . .</span>");
});
but my page dose not seem much faster
Here is my current code to load the next 3 images
const cards = $('.card-deck')
let clicks = 3;
if (cards.length > 3) {
cards.hide();
cards.slice(0, 3).show();
}
$('.show-more').on('click', function() {
clicks = clicks + 3;
if (clicks > cards.length) {
clicks = cards.length
}
cards.slice(0, clicks).fadeIn();
});

Here is the approach you can proceed with:
$(.cards-desk).hide();
$('.show-more').on('click', function() {
$(.cards-desk).append("You images html code");
$(".cards-desk").show()
});

Related

Prevent createElement from creating multiple identical images

I am going to try and be as thorough as possible on this so stick with me.
My program takes user input entered on a form. This input goes through a range of if statements that will set variables to true, these variables that are set to true will then use createElement to create img inside predetermined divs. There will always be at least one img created, and up to 4 imgs at the most. This is all completed by a button click.
I learned createElement will continuously createElement with each button click posting the img right next to the original img and will do this infinitely or until the page is reloaded.
My solution was to create a counter that incremented each time the button was clicked. That took care of any extra createElements. Then I thought if the user first entered a large number that will create 2 separate and individual images say... image 1 and image 2 (which is desired), then if the user enters a lower number that only creates image 1, then image 2 would still be posted (unwanted). Of course a page refresh would clear the images created and avoid this.
So I'm not quite sure what to do...
Ideally when the button is pressed a second time then all old createElements would be cleared, and all new createElements would populate.
I removed the counter for the purpose of this question
poster__#'s are the called id's...
const movieTime = 30;
var userTimeAvailable = 25;
const button = document.getElementById("calculate");
button.onclick = function calculateTime() {
if (userTimeAvailable < movieTime) {
console.log(
"You have enough time to watch " +
Math.round((userTimeAvailable / movieTime) * 100) +
"% of the movie."
);
displayMoviePoster1 = true;
}
moviePosterGenerator();
}
function moviePosterGenerator() {
if (displayMoviePoster1 === true) {
var par = document.getElementById("poster__2");
var theatricalMoviePoster = document.createElement("img");
theatricalMoviePoster.src = "imgURL";
par.appendChild(theatricalMoviePoster);
}
}
<button class="button" id="calculate">calculate</button>
<div class="movie-poster__container" id="posters">
<div class="movie-poster" id="poster__1"></div>
<div class="movie-poster" id="poster__2"></div>
<div class="movie-poster" id="poster__3"></div>
<div class="movie-poster" id="poster__4"></div>
</div>

Permanent change to 1 div out of many of the same

I have stumbled on to a problem which I cannot find the solution to, for some time now, and it is kind of a drag, but hey, I will try to be as precice as possible, there is no stupid question so here goes.
This is a DIV table for appointments and a page, these green circles are divs also and there are 209 divs total, divs are clickable and once clicked they open up a new page in a new tab which asks the user to to enter his info Name, Last Name etc. and make an appointment.
When the user enters what is asked of him he clicks a button makes an appointment and the div that has been clicked in the previous "table" page permanently changes color to red, so when someone else visits the "table" page sees that the time for the appointment is unavailable.
I have come up with this.
TABLE PAGE CODE:
<script type="text/javascript">
window.onload = function () {
var myLoadedColor = localStorage.getItem('myDataStorage');
document.getElementById('L1').style.backgroundColor = myLoadedColor;
var d = document.getElementsByClassName("circleBase type1");
for(var i = 0; i < d.length; i++) {
d[i].onclick = function() {
window.open("EnterInformation.html");
}
}
}
window.addEventListener('storage', function (event) {
if (event.storageArea === localStorage) {
var myLoadedColor = localStorage.getItem('myDataStorage');
document.getElementById('L1').style.backgroundColor = myLoadedColor;
}
}, false);
APPOINTMENT PAGE CODE:
function SaveInfo() {
localStorage.Yritys = $('#Yritys').val();
localStorage.Henkilönimi = $('#Henkilönimi').val();
localStorage.Asema_yrityksessa = $('#Asema_yrityksessa').val();
localStorage.Puhelin_Nr = $("#Puhelin_Nr").val();
localStorage.e_Mail = $('#e_Mail').val();
localStorage.Keskustelun_aihe = $('#Keskustelun_aihe').val();
alert("You have successfully made an appointment");
}
function closeSelf() {
window.close(this);
}
function changeColor() {
myCustomColor = 'red';
localStorage.setItem('myDataStorage', myCustomColor);
}
With this code It works but only for 1 div the first one.
My question is do I have to add Id to all of the 209 divs I have and then copy this code 209 times for each and every one of the divs and create a specific storage for each of them? or is there an easier way to do this?
Ajax is like an acquaintance to me.
Any advice would be helpful if it helps me achieve this goal, because I can't sleep and keep thinking about the ways to end the agony!

Javascript Tabs with HTML 5 and CSS3 not working

Hello I am trying to create HTML form with JavaScript tabs. There are three tabs and I want to hide second and third tab contents in page on load.
This is my Javascript function
window.onload = function() {
// get tab container
var container = document.getElementById("tabContainer");
var tabcon = document.getElementById("tabscontent");
//alert(tabcon.childNodes.item(1));
// set current tab
var navitem = document.getElementById("tabHeader_1");
//store which tab we are on
var ident = navitem.id.split("_")[1];
//alert(ident);
navitem.parentNode.setAttribute("data-current",ident);
//set current tab with class of activetabheader
navitem.setAttribute("class","tabActiveHeader");
//hide two tab contents we don't need
var pages = tabcon.getElementsByTagName("div");
for (var i = 1; i < pages.length; i++) {
pages.item(i).style.display="none";
};
//this adds click event to tabs
var tabs = container.getElementsByTagName("li");
for (var i = 0; i < tabs.length; i++) {
tabs[i].onclick=displayPage;
}
}
When I run these file in localhost it is working correctly. But I wants to run this file in my server. When I store this file in my server, it is not working. It show all tab contents and not hide second and third tab contents in page load as shown in figure.
Tabs Image
I cant identify the reason. Any help is greatly appreciated.

hovering over image changes it to hoverimg. but after clicking the image, hover stops working

It works but there's a pesky bug I can't understand how to fix (i'm a beginner).
What happens is there are 3 image buttons (only showing code for 1 here) and when i hover over them, they change image, and revert when i take mouse off. This is the html.
When I click any of the 3 image buttons (javascript), it changes its own image, and sets the other 2 image buttons to the normal image.
After this point (clicking the image) the hovering html code doesn't work anymore.
function changeImage3() {
document.getElementById('MageBTN').src = 'images/Character/NotSelected_Mage.png';
document.getElementById('WarriorBTN').src = 'images/Character/NotSelected_Warrior.png';
}
<a href="#" onclick="changeImage3()"><img id="RogueBTN" src="images/Character/NotSelected_Rogue.png" alt="image"
onclick="this.src='images/Character/Selected_Rogue.png';
this.onmouseover = false; this.onmouseout = false;"
onmouseover="this.src='images/Character/Selected_Rogue.png';"
onmouseout="this.src='images/Character/NotSelected_Rogue.png';">
</a>
just suggestion.. Use simple css property..
#yourID a:hover{
//your image which want to show on hover
}
If I have understand correctly you want to lock the selected state of a button on click and unlock/reset to not-selected when another button is clicked. Therefore you have to store the state of the buttons so I suggest to move all functionality to a script. Since you have all images well ordered it's enough to change Sel/NotSel in the url.
window.onload = function() { // ensures that all elements are there
var buttons = {
RougeBTN: document.getElementById("RougeBTN"),
VertBTN: document.getElementById("VertBTN"),
BleuBTN: document.getElementById("BleuBTN")
},
locked;
function clicked() {
for (var btn in buttons) { // iterate over the buttons
var b = buttons[btn];
// if this button was clicked save the state
if (btn == b.id) locked = btn;
else {
b.src = b.src.replace('/Sel', '/NotSel');
}
}
}
function mover() { // works only when button is not locked
if (locked != this.id) this.src = this.src.replace('/NotSel', '/Sel');
}
function mout() { // works only when button is not locked
if (locked != this.id) this.src = this.src.replace('/Sel', '/NotSel');
}
for (var btn in buttons) { // now set the functions to all buttons
var b = buttons[btn];
b.onclick = clicked; b.onmouseover = mover; b.onmouseout = mout;
}
}
In html all buttons look like this:
<img id="RougeBTN" src="images/Character/NotSelected_Rouge.png" alt="image">

Display & Hide Divs Sequentially on click

Basics:
I have a webpage which loads several content divs to a page, then shows them sequentially when the user clicks on the "load more" link.
Example here: JSFiddle Example
$("#load-more").click(function(e) {
var t = $(this);
if (t.data('disabled')){
return;
}
var hiddenGroups = $('.group:not(:visible)');
if (hiddenGroups.length > 0){
hiddenGroups.first().show();
} else{
t.data('disabled', true);
}
});
I have two questions based on this example:
1) The "load more" link should hide its self when the final div is showing, but is not functioning correctly in my example.
however, I'd really like it to:
2) Hide the "load more" div, and instead show/change the functionality to "Hide Items" and hide the content divs in reverse order upon click.
This is how I would do it:
JSFIDDLE
The idea:
Set a variable instructing if you are toggling more or less
var load = 'more';
check if we are loading more or less
and a function to switch the direction and the button text, to stop copy/pasting the same javascript.
Although there are only two things happening in the function, i'm working on the assumption this might grow as your application grows - if this was not to grow then it may be worth getting rid of the function andjust adding the code with the rest
The full snippet:
var load = 'more';
$("#load-more").on('click',function (e) {
// show the next hidden div.group, then disable load more once all divs have been displayed
// if we are loading more
if (load == 'more') {
// get the amount of hidden groups
var groups = $('.group:not(:visible)');
// if there are some available
if (groups.length > 0) {
// show the first
groups.first().show();
// if that was the last group then set to load less
if (groups.length == 1) {
switchLoadTo('less');
}
}
// we are loading less
} else {
// get the groups which are currently visible
var groups = $('.group:visible');
// if there is more than 1 (as we dont want to hide the initial group)
if (groups.length > 1) {
// hide the last avaiable
groups.last().hide();
// if that was the only group available, set to load more
if (groups.length == 2) {
switchLoadTo('more');
}
}
}
});
function switchLoadTo(dir) {
load = dir;
$("#load-more").html('Load ' + dir);
}
http://jsfiddle.net/8Re3t/20/
See snippet below. Probably not the most optimized code, but you get the idea and can optimize it on implementation.
var load = true;
$("#load-more").click(function(e) {
// show the next hidden div.group, then disable load more once all divs have been displayed
var t = $(this);
if (t.data('disabled')){
return;
}
var hiddenGroups = $('.group:not(:visible)');
if(load) {
hiddenGroups.first().show();
} else {
$('.group:visible').last().hide();
}
if (hiddenGroups.length > 1){
jQuery("#load-more").html("Load");
load = true;
} else {
jQuery("#load-more").html("Hide");
load = false;
}
});

Categories

Resources