troubleshooting Question

Show loadig Gif while images are loading

Avatar of Stanton_Roux
Stanton_RouxFlag for South Africa asked on
JavaScriptjQuery
1 Comment1 Solution616 ViewsLast Modified:
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>
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 1 Comment.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 1 Comment.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros