Results 1 to 6 of 6

Thread: Broken Images

  1. #1
    Join Date
    Dec 2004
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Broken Images

    Hi,

    Well I was looking for a certain script that I can't seem to find,I run a small personal site and some of my images are hosted on other servers,so sometimes if the server is down the image will appear broken,is their any script I can use so that if my image is broken the script will replace it with another image of my choice? thanks in advance

    kind regards

    Maverick

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    is their any script I can use so that if my image is broken the script will replace it with another image of my choice?
    Nope. Javascript doesn't know if the image is there or not; all it sees is the HTML that makes up the image.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Ahem:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>
    <body>
    <script type="text/javascript">
    <!--
    //Check Image Load © John Davenport Scheuer
    //this credit must remain for legal use
    var ns6Op8=!document.all||window.opera
    if(ns6Op8){
    var loads=new Array()
    onload=function(){
    var pics=document.images
    for (var i_tem = 0; i_tem < pics.length; i_tem++)
    if (loads[i_tem]==undefined)
    pics[i_tem].src=pics[i_tem].lowsrc
    }
    }
    //-->
    </script>
    
    <img src="no.jpg" lowsrc="1st.jpg" onerror="this.src=this.lowsrc;" onload="if(ns6Op8){loads[0]=this.src}" />
    <img src="fold.gif" lowsrc="1st.jpg" onerror="this.src=this.lowsrc;" onload="if(ns6Op8){loads[1]=this.src}" />
    </body>
    </html>
    I just whipped this up for the four major 'pc/windows' browsers that I'm aware of, it should work in some other browser/OS combos but, in some I'm sure it will need to be tweaked. I think there should also be a way to get the image tag's onload event to assign itself the correct index number for the loads array. Probably by making code or a function for that in the script.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I was right, it complicates the script (also because I added error checking and code to make it play well with other potential scripts on the page) but, simplifies the markup considerably. Put this script in the head:
    Code:
    <script type="text/javascript">
    <!--
    
    //Check Image Load © John Davenport Scheuer
    //this credit must remain for legal use
    
    function checkLoad(img){
    var pics=document.images
    for (var i_tem = 0; i_tem < pics.length; i_tem++)
    if (pics[i_tem]==img)
    loads[i_tem]=img.src
    }
    
    var loads=new Array()
    
    function isLoaded(){
    var pics=document.images
    for (var i_tem = 0; i_tem < pics.length; i_tem++)
    if (loads[i_tem]==undefined&&pics[i_tem].lowsrc)
    pics[i_tem].src=pics[i_tem].lowsrc
    }
    
    if ( typeof window.addEventListener != "undefined" )
        window.addEventListener( "load", isLoaded, false );
    else if ( typeof window.attachEvent != "undefined" ) {
        window.attachEvent( "onload", isLoaded );
    }
    else {
        if ( window.onload != null ) {
            var oldOnload = window.onload;
            window.onload = function ( e ) {
                oldOnload( e );
                isLoaded();
            };
        }
        else
            window.onload = isLoaded;
    }
    //-->
    </script>
    Now the markup can look like this:
    HTML Code:
    <img src="no.jpg" onload="checkLoad(this)" />
    <img src="no.jpg" lowsrc="1st.jpg" onload="checkLoad(this)" />
    <img src="fold.gif" lowsrc="1st.jpg" onload="checkLoad(this)" />
    Notice the onload event added to the first image with no lowsrc attribute. This is wrong but, will be ignored due to error checking. I could have added the image tags' onload checks dynamically but, Opera didn't like that, FF and IE thought it was fine. One other note, the lowsrc attribute is the alternate image and can be a different one for each image tag. If both the lowsrc and src are missing, you will get the regular broken image except in FF which, for some reason, renders no image at all. Also FF will hang trying to load the page at times if any of the primary images are not found but, with a refresh or two will load the alternate(s), if available, and the page in general if the alternate(s) is/are unavailable.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    I could, of course, be wrong.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  6. #6
    Join Date
    Dec 2004
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks for all the help guys

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •