Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Swaped Image only partially loads?

  1. #1
    Join Date
    Mar 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Swaped Image only partially loads?

    Hi,

    I've been having a problem with swapping images. I wrote this code;

    Code:
    function swapImage(target,location) {
      if (document.images) {
        document[target].src = location
      }
    }
    
    <a href="javascript:;" onClick="swapImage('bigpic','images/pic1.jpg')"><img src="images/thumbs/pic1thumb.jpg" width="61" height="85" border="0"></a>
    When you click the thumb it loads the full size pic in to the image 'bigpic'. The problem is that it often only loads a part of the image. Even if they full image has previously loaded and should be sitting in cache. Any ideas?
    Thanks

  2. #2
    Join Date
    Mar 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Actually I've just done some more testing and it seems that 'onClick' won't load them at all. When you click it removes the placeholder pic but the new one doesn't load.

    I tried changing them to 'OnMouseDown' but it's not much better. You have to click and hold the mouse button down and wait for a second before the image loads. Once loaded it will work instantly if you click again.

    Does anyone have an idea what it happening?

  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

    Your code as written will not work as, the img tag has no attribute name="bigpic", which it would need for this to work. As to why there is partial image loading or perhaps partial image obstruction, I would have to see the actual page to be able to even have a clue.

    PLEASE: Include the URL to your problematic webpage that you want help with.
    - John
    ________________________

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

  4. #4
    Join Date
    Mar 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1
    the img tag has no attribute name="bigpic"
    It's actually targeting another image. Sorry I didn't include that bit of code as it's just a tag elsewhere.

    Here is the URL LINK

  5. #5
    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

    Two things that I see right off, one (others are probably similarly large) of the 'big images' is 50k, far larger than it need be, use an image optimization program* and put those big images on a diet! This will speed load time. Another thing that is missing from this setup is a preloading scheme. Something like:

    Code:
    <script type="text/javascript">
    function preload(){
    var loader=new Array();
    var bigones=['big1.jpg', 'big2.jpg', 'big3.jpg']
    for (var i_tem = 0; i_tem < bigones.length; i_tem++){
    loader[i_tem]=new Image();
    loader[i_tem].src=bigones[i_tem]
    }
    }
    onload=preload;
    </script>
    In the head of the page would get the larger images ready. Bottom line, the larger images are so big that they can overwhelm the browser and make it hang when they are suddenly inserted into the DOM without having been preoladed. For best results, make the images smaller and preload them.


    * DD has an online optimizer linked from their main page, xat.com has a very good program available for trial from their website, there are others.
    - John
    ________________________

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

  6. #6
    Join Date
    Mar 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the help. I'll give them a go. I didn't think that such (relatively) small images would make it hang like that.

  7. #7
    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

    50k is pretty big for the web, 20k is more reasonable and 10k is just about ideal for broadband, dial-up and web images don't do so well together under most conditions. These figures are more crucial when multiple images are involved, one big image on a page isn't so bad with broadband. What makes it even tougher on the browsers in this situation is that the image is suddenly thrust upon it when it isn't expecting it. IE was bad with this when I tested your page, Opera handled it rather gracefully, simply taking its time and at least loading the image as it was caching it. IE didn't seem to be able to 'walk and chew gum' at the same time though (cache and display).

    EDIT: One other thing, optimizing all the images on the page, including the thumbnails and any used simply for display purposes will lower the overall overhead of the page and make things load faster and work more smoothly.
    Last edited by jscheuer1; 03-06-2006 at 09:06 AM.
    - John
    ________________________

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

  8. #8
    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 looking at your page and site in general a bit more and it appears as though the permissions on the image directories and/or image files may not be set correctly.
    - John
    ________________________

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

  9. #9
    Join Date
    Mar 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1
    permissions on the image directories
    Better?

  10. #10
    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

    Quote Originally Posted by MrCup
    Better?
    If they are set incorrectly, yes, setting them correctly will make things better.
    - John
    ________________________

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

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
  •