Link to home
Start Free TrialLog in
Avatar of Stanton_Roux
Stanton_RouxFlag 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>
ASKER CERTIFIED SOLUTION
Avatar of Roopesh Reddy
Roopesh Reddy
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial