Avatar of Stanton_Roux
Stanton_Roux
Flag for South Africa asked on

Show loadig Gif while images are loading

Hi There

I have a javascript function that changes the SRC of an image.
These images are quite large and I would like to have a loading gif while the images load after the click event.

Thanks stanton

 function changeAngle(pAngle) {
            //Calculate the new angle value based on the array of available angles.
            var _currentAngle = parseInt(document.getElementById('<%=hfAngle.ClientID %>').value, 10);

            if (parseInt(pAngle, 10) == 0) {
                if (_currentAngle == 1) {
                    document.getElementById('<%=hfAngle.ClientID %>').value = 6
                }
                else {
                    document.getElementById('<%=hfAngle.ClientID %>').value = _currentAngle - 1;
                }
            }
            else if (parseInt(pAngle, 10) == -1) {
                if (_currentAngle == 6) {
                    document.getElementById('<%=hfAngle.ClientID %>').value = 1
                }
                else {
                    document.getElementById('<%=hfAngle.ClientID %>').value = _currentAngle + 1;
                }
            }
            else {
                document.getElementById('<%=hfAngle.ClientID %>').value = pAngle;
            }

            //change the dot
            document.getElementById('imgDot1').src = "images/dot.png";
            document.getElementById('imgDot2').src = "images/dot.png";
            document.getElementById('imgDot3').src = "images/dot.png";
            document.getElementById('imgDot4').src = "images/dot.png";
            document.getElementById('imgDot5').src = "images/dot.png";
            document.getElementById('imgDot6').src = "images/dot.png";
            document.getElementById('imgDot' + document.getElementById('<%=hfAngle.ClientID %>').value).src = "images/dot_roll.png";

            //change the base image
            document.getElementById('imgDiv2').src = "images/Etios/" + document.getElementById('<%=hfSMCCode.ClientID %>').value + "/" + document.getElementById('<%=hfColourCode.ClientID %>').value + "/" + document.getElementById('<%=hfAngle.ClientID %>').value + "/Base.png";

            //change the acessorries.
            jQuery('#dvAccessory img').each(function () {
                jQuery(this).attr('src', "images/Etios/" + document.getElementById('<%=hfSMCCode.ClientID %>').value + "/" + document.getElementById('<%=hfColourCode.ClientID %>').value + "/" + document.getElementById('<%=hfAngle.ClientID %>').value + "/" + $(this).attr('id').replace("img", "") + ".png");
            });
        }



html
 <a href="javascript:void(0);" onclick='changeAngle("0");'>
<div id="apDiv1">
                <img id="imgDiv2" alt="" src="" style="visibility: hidden;" runat="server" />
            </div>
jQueryJavaScript

Avatar of undefined
Last Comment
Roopesh Reddy

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Roopesh Reddy

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck