is there code to auto reload images if it doesn't loaded first time in users browser?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • fuchsia555
    New Member
    • Dec 2009
    • 56

    #16
    Ok dear , sure i trust your experience and Atli as well

    Comment

    • fuchsia555
      New Member
      • Dec 2009
      • 56

      #17
      i have tried the code but it doesn't work , i was browsing the website and some of images doesn't loaded or reloaded , maybe something wrong with the code ?

      Comment

      • Markus
        Recognized Expert Expert
        • Jun 2007
        • 6092

        #18
        Post the source of the page please. That is ALL the HTML.

        Comment

        • fuchsia555
          New Member
          • Dec 2009
          • 56

          #19
          Thanks for reply Mr Markus
          i have inserted the javascript between body tags , Atli was referring to something but i didn't get the meaning and maybe it doesn't work because of it , ( And note that this has to be executed after every <img> element you want it to work on )
          Code:
          <html>
          <head>
          ...
          </head>
          <body>
          <script>
           
          var images = document.getElementsByTagName('IMG');
          for (var i in images) {
           
          images[i].onerror = function() {
              this.onerror = null;
              this.src = this.src;
          }
           
          }
          </script>
          
          </body>
          </html>

          Comment

          • Atli
            Recognized Expert Expert
            • Nov 2006
            • 5062

            #20
            Atli was referring to something but i didn't get the meaning and maybe it doesn't work because of it , ( And note that this has to be executed after every <img> element you want it to work on )
            What I mean by this is; in order for the JavaScript code to be able to use your <img> tags, the tags must be written before the JavaScript code in your HTML markup.

            Consider these two examples:
            [code=html]
            <img id="myimg" src="myimg.png" />
            <script>
            // This prints "myimg.png"
            alert(document. getElementById( 'myimg').src)
            </script>[/code]
            [code=html]
            <script>
            // This prints nothing, and will likely give you an error.
            alert(document. getElementById( 'myimg').src)
            </script>
            <img id="myimg" src="myimg.png" />[/code]
            See what I mean? In the second snippet, when the JavaScript code tries to fetch the <img> element, it can't because it doesn't exist yet.

            This is why I suggested that you put your JavaScript code right before the closing </body> element, because at that point every <img> tag would definitely be created already.

            And this is also the reason why you can't put the code in the <head>, because it gets executed before the <body>, so at that point no part of the body, including the images, have been created yet.

            is there any example for how DOM event works? may it would help in css background images
            Like I said earlier, I'm not sure those will help reload CSS images (although I haven't really tried it yet).

            If you want to learn about DOM events, start with the Wikipedia entry, and maybe try a Google search.

            There is plenty of info available on this available out there, only a Google search away, so there is really no point repeating it here.

            Comment

            • Markus
              Recognized Expert Expert
              • Jun 2007
              • 6092

              #21
              Originally posted by fuchsia555
              Thanks for reply Mr Markus
              i have inserted the javascript between body tags , Atli was referring to something but i didn't get the meaning and maybe it doesn't work because of it , ( And note that this has to be executed after every <img> element you want it to work on )
              Code:
              <html>
              <head>
              ...
              </head>
              <body>
              <script>
               
              var images = document.getElementsByTagName('IMG');
              for (var i in images) {
               
              images[i].onerror = function() {
                  this.onerror = null;
                  this.src = this.src;
              }
               
              }
              </script>
              
              </body>
              </html>
              There are no <img> elements in that HTML.

              Comment

              • Markus
                Recognized Expert Expert
                • Jun 2007
                • 6092

                #22
                Instead of sticking JS in arbitrary locations in the HTML, stick it in the <head> element (or better yet, stick it in it's own .js file - cache!) and use the onload action.

                Code:
                <html ...>
                   <head>
                       <script type="text/javascript">
                            window.onload = function() {
                                /* Any JS here will be executed when the DOM (HTML tree) is available */
                            }
                        </script>
                    </head>
                    <body></body>
                </html>

                Comment

                • Atli
                  Recognized Expert Expert
                  • Nov 2006
                  • 5062

                  #23
                  Originally posted by Markus
                  Instead of sticking JS in arbitrary locations in the HTML, stick it in the <head> element (or better yet, stick it in it's own .js file - cache!) and use the onload action.
                  Normally I would agree with that, but in this case that won't work.

                  The window.onload event isn't fired until after everything on the page has loaded, including the images. So both the onload and onerror events will already have fired for all the images before the window.onload event. It'll be to late to try to use them.

                  Using jQuery's $(document).rea dy() function (or something equivalent) might work tho.

                  Comment

                  • Markus
                    Recognized Expert Expert
                    • Jun 2007
                    • 6092

                    #24
                    Originally posted by Atli
                    Normally I would agree with that, but in this case that won't work.

                    The window.onload event isn't fired until after everything on the page has loaded, including the images. So both the onload and onerror events will already have fired for all the images before the window.onload event. It'll be to late to try to use them.

                    Using jQuery's $(document).rea dy() function (or something equivalent) might work tho.
                    Huh? If you have the JS after the images within the HTML, then wouldn't the JS be loaded after the onerror, onload events are fired?

                    Comment

                    • fuchsia555
                      New Member
                      • Dec 2009
                      • 56

                      #25
                      Instead of sticking JS in arbitrary locations in the HTML, stick it in the <head> element (or better yet, stick it in it's own .js file - cache!) and use the onload action.
                      Huh? If you have the JS after the images within the HTML, then wouldn't the JS be loaded after the onerror, onload events are fired?
                      I'm little confused , which way i better use to make it work please ?

                      Comment

                      • Atli
                        Recognized Expert Expert
                        • Nov 2006
                        • 5062

                        #26
                        Huh? If you have the JS after the images within the HTML, then wouldn't the JS be loaded after the onerror, onload events are fired?
                        Those events are only fired (on images) once the image load attempt is complete, so if you can execute your JavaScript before that happens then you can manipulate the handlers for those events.

                        And it appears that all browsers since IE5 execute "inline" JavaScript immediately upon finding it, or at least before the images are loaded, so by adding JavaScript to manipulate the events inside the HTML body, you can mess with the event handlers.

                        Comment

                        • Markus
                          Recognized Expert Expert
                          • Jun 2007
                          • 6092

                          #27
                          Originally posted by Atli
                          Those events are only fired (on images) once the image load attempt is complete, so if you can execute your JavaScript before that happens then you can manipulate the handlers for those events.
                          I get that, but in your own words, once the javascript that is post-<img> in placement is loaded, the <img>'s onerror and onload events will have already been fired, or will there be enough delay that the javascript is executed in time to catch these?

                          Comment

                          • kovik
                            Recognized Expert Top Contributor
                            • Jun 2007
                            • 1044

                            #28
                            In that case, the OP should give up on doing this dynamically via JavaScript and do it dynamically via PHP. This *is* the PHP forum, is it not? :P

                            Use preg_replace() to find all <img> elements and add the onerror event to them.

                            Comment

                            • Atli
                              Recognized Expert Expert
                              • Nov 2006
                              • 5062

                              #29
                              Originally posted by Markus
                              I get that, but in your own words, once the javascript that is post-<img> in placement is loaded, the <img>'s onerror and onload events will have already been fired, or will there be enough delay that the javascript is executed in time to catch these?
                              No, I never said that. I just said that the window.onload event is executed to late. JavaScript code that is put into the <body> seems to be executed before the images are loaded, or at least before the requests for them finish.

                              It might be because the browsers don't request the images until the DOM is ready, or that the request for them is simply slower than the HTML parser, but in all my tests (on a localhost), JavaScript inside the <body> always got executed before the <img> load and error events.

                              Comment

                              • fuchsia555
                                New Member
                                • Dec 2009
                                • 56

                                #30
                                Hi
                                it's nice conversations
                                Use preg_replace() to find all <img> elements and add the onerror event to them.
                                Mr kovik , how can it be done by php ?

                                and kindly can you Guys suggest for me the best webhosting in your opinions ?

                                Comment

                                Working...