delay loading images until after the text content

Discussion in 'JavaScript' started by Mr.Bill, Nov 19, 2008.

0
  1. #1
    Wonder if someone could help out with a small task.

    I have an image I want to load in a page but after the content has already loaded. Would like to be able to adjust it so I could make it 3-5 seconds and it would show a loading image in the location the image will appear once the time is up the image will appear and the loading image will go away


    Could someone help me out with this please.
     
    Mr.Bill, Nov 19, 2008 IP
  2. BrandonGregory

    BrandonGregory Peon

    Messages:
    28
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Try sticking the low-res image as the src in an img tag, but make sure to give the img an id. Create a function to change the src of the img to the new image, and call the function in an onload on the body tag.
     
    BrandonGregory, Nov 20, 2008 IP
  3. Mr.Bill

    Mr.Bill Well-Known Member

    Messages:
    2,818
    Likes Received:
    134
    Best Answers:
    0
    Trophy Points:
    160
    #3
    Would you be able to provide a sample of this?
     
    Mr.Bill, Nov 20, 2008 IP
  4. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #4
    here is one... in mootools:
    
<img src="loader.gif" id="targetid" />
...
<script>
window.addEvent("domready", function() {
    new Asset.image("/images/largerimage.jpg", {
        onload: function() {
            this.replaces($("targetid"));
        }
    });
});
    PHP:
     
    dimitar christoff, Nov 21, 2008 IP
  5. Mr.Bill

    Mr.Bill Well-Known Member

    Messages:
    2,818
    Likes Received:
    134
    Best Answers:
    0
    Trophy Points:
    160
    #5
    Did you right this or did you find this on mootools? I looked over on the forums and cant find it. Does this need mootools 1.1 to work and how do you set the image delay?
     
    Mr.Bill, Nov 21, 2008 IP
  6. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #6
    it can work with mootools 1.11 sure. i wrote this, yes. however on mootools 1.11 there used to be some issues with the onload event being raised for IE6 and safari 1.3...

    you can use the delay function:
    
window.addEvent("domready", function() {
    new Asset.image("/images/largerimage.jpg", {
        onload: function() {
            (function() {
                this.replaces($("targetid"));
            }).delay(5000, this); // delay 5 seconds, bind to this
        }
    });
});
    PHP:
     
    dimitar christoff, Nov 22, 2008 IP
  7. cc2365

    cc2365 Member

    Messages:
    91
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #7
    You can use this JavaScript:

    
...
 <body>
...

  <img id="img1" src="loading.gif" />
  <img id="img2" src="loading.gif" />
...
  <img id="img30" src="loading.gif" />

...
  <script type="text/javascript">
  <!--
   function showimage() {
    document.getElementById("img1").src="pic1.jpg";
    document.getElementById("img1").src="pic1.jpg";
...
    document.getElementById("img30").src="pic30.jpg";
   }
   setTimeout("showimage();", 5000);
  //-->
  </script>
 </body>
</html>
    HTML:
    If you worry that this won't work in javascript-disabled browser, tell me and I can give you advanced codes.
     
    cc2365, Nov 22, 2008 IP
  8. Mr.Bill

    Mr.Bill Well-Known Member

    Messages:
    2,818
    Likes Received:
    134
    Best Answers:
    0
    Trophy Points:
    160
    #8
    Yes that would be a concern of mine for those users
     
    Mr.Bill, Nov 23, 2008 IP
  9. cc2365

    cc2365 Member

    Messages:
    91
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #9
    You can use <noscript> tag to load the images you want to load directly, and use Java Script to load them as you want. It works like this:

    

 <script type="text/javascript">
  <!--
   document.write('<img id="img1" src="loading.gif" />');
  //-->
 </script>
 <noscript>
  <img src="pic1.gif" />
 </noscript>
...
 <script type="text/javascript">
  <!--
   function showimage() {
    document.getElementById("img1").src="pic1.jpg";
   }
   setTimeout("showimage();", 5000);  //-->
 </script>
    HTML:
     
    cc2365, Nov 25, 2008 IP
  10. Mr.Bill

    Mr.Bill Well-Known Member

    Messages:
    2,818
    Likes Received:
    134
    Best Answers:
    0
    Trophy Points:
    160
    #10 
     <script type="text/javascript">
  <!--
   function showimage() {
    document.getElementById("img1").src="pic1.jpg";
   }
   setTimeout("showimage();", 5000);  //-->
 </script>
    Code (markup):
    Now how could I make this image click able so once loaded they could click to go to page?
     
    Mr.Bill, Nov 26, 2008 IP
  11. Mr.Bill

    Mr.Bill Well-Known Member

    Messages:
    2,818
    Likes Received:
    134
    Best Answers:
    0
    Trophy Points:
    160
    #11
    Does anyone know how I would make it so the loaded image would have hyperlink so the users could click on it. Also how could a second image be loaded also but only have one loading.gif ?
     
    Mr.Bill, Nov 28, 2008 IP
  12. dementic

    dementic Peon

    Messages:
    280
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #12
    your last question is really quite simple,
    just put a link on the images:

    <a href="LINK"><img src="IMAGE"></a>
    Code (markup):
     
    dementic, Nov 26, 2010 IP