Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Why do my images not load correctly in IE?

    Hello, I'm working on a javascript image scroll on this website: http://www.portal.beta.state.pa.us/p.../dep_home/5968 in my agency's staging environment. The problem is that the images load fine in Firefox and Chrome, but in IE sometimes when the page first loads, one image gets hidden beneath another, especially after clicking on the arrow to bring up the next group of images. After I refresh the page, they appear as they should.

    For example, the page loads displaying the first 5 images but when I click the right (next) arrow, image 10 is hidden beneath image 6. I've disabled compatibility view in IE but the problem remains. Should I preload the images?

    Any advice?

    Thanks.
    Attached Files Attached Files

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Ummm...you've got a *LOT* more problems than just that.

    When I bring up the page in Chrome, it takes a *LONG* time to load, taking a second or two to load each of the menu items on the left side.

    And if I try to do a VIEW==>>SOURCE in Chrome, it hangs Chrome! Because apparently that page is dumping out HIDDEN ERROR MESSAGES continuously, and Chrome tries to keep reloading the source to get the added messages.

    In MSIE9, it *does* get the full source when I do VIEW==>>SOURCE, but it is 25,039 lines long!!! Of which *thousands* of lines are JSP error messages (and JSP informational messages).

    Here is just a VERY SMALL sampling:
    Code:
    	<!--Error displaying tag if in library logic. Unable to perform attribute value replacement on attribute $boolvalue.: com.plumtree.openfoundation.util.XPIllegalArgumentException: Unable to perform attribute value replacement on attribute $boolvalue.
       at com.plumtree.portaluiinfrastructure.tags.helper.TagHelper.ProcessAttribute(String _strAttribute) in e:\buildroot\Release\portalui\10.3.0.x\ptwebui\portaluiinfrastructure\dotnet\prod\src\com\plumtree\portaluiinfrastructure\tags\helper\TagHelper.cs:line 772
       at com.plumtree.portaluiinfrastructure.tags.helper.TagHelper.InternalGetAttributeFromName(String _strAttribute, Int32 _nXMLAttributeType, Boolean _bIgnoreProcessingErrors) in e:\buildroot\Release\portalui\10.3.0.x\ptwebui\portaluiinfrastructure\dotnet\prod\src\com\plumtree\portaluiinfrastructure\tags\helper\TagHelper.cs:line 518
       at com.plumtree.portaluiinfrastructure.tags.helper.TagHelper.ValidateRequiredAttributes() in e:\buildroot\Release\portalui\10.3.0.x\ptwebui\portaluiinfrastructure\dotnet\prod\src\com\plumtree\portaluiinfrastructure\tags\helper\TagHelper.cs:line 1174
       at com.plumtree.portaluiinfrastructure.tags.helper.TagHelper.ValidateContext() in e:\buildroot\Release\portalui\10.3.0.x\ptwebui\portaluiinfrastructure\dotnet\prod\src\com\plumtree\portaluiinfrastructure\tags\helper\TagHelper.cs:line 1035
       at com.plumtree.portaluiinfrastructure.tags.displaytree.TagDisplayElement.Display(TagVisitor _tagVisitor) in e:\buildroot\Release\portalui\10.3.0.x\ptwebui\portaluiinfrastructure\dotnet\prod\src\com\plumtree\portal....
    and so on and so on for many more lines. And then it does it all over again.

    There are also thousands of lines of useless comments, apparently plunked in there by the JSP code. Example:
    Code:
    <!--If the stopnavlog variable has a value of Stop, we do not need continue any further processing. -->
    					
    					<!--Have not found a match-->
    					
    						
    						
    							<!--The community object id of the current item in the navigation collection matches the community object id of a different url. -->
    							
    							<!--Does not match the Community ID in the different url collection. Assign the url that the portal provided to the navigation item.-->
    The strangest part may be at the very bottom:
    Code:
    <!--Portal Version: 10.3.0.337003, Changelist: 337003, Build Date: 10/08/2008 at 02:57 PM-->
    Build date in 2008?????

    Does this mean that you are modifying JavaScript and/or CSS *without* rebuilding the JSP code?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Greg874 (02-06-2013)

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    > Should I preload the images?

    ABSOLUTELY! I think the reason you may have the problem in IE is because it actually loads the page much much faster than CHROME does (don't ask me why! that's almost a first for IE in my experience).

    One easy way to preload the images that are initially hidden: Just put them in a
    Code:
    <div style="position: absolute; width: 1px; height: 1px; overflow: hidden; visibility: hidden;">
       <img .../>
       <img .../>
       <img .../>
       <img .../>
       <img .../>
    </div>
    That way they will count as part of the page-load time and yet not occupy any space (well, one pixel) on the page.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Greg874 (02-06-2013)

  • #4
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for the quick reply. Here is some background information that perhaps I should have included in my initial post. Our website was built using Oracle WebCenter Interaction so the only code that I have control over is the code that I attached to my post. Also, I didn't write this code myself, it's from another state agency's website used with their permission.

    At someone's suggestion, last week I ran the source code for the page (all 25,000+ lines of it) through the W3C Validation tool. It showed 143 errors and 33 warnings so as you said there is a lot of bad code on the page. I haven't yet run the code I attached to my initial post but I will shortly and fix any errors that are found.

    Thanks for the suggestion and code sample to preload the images, I'll try that out and hopefully it will solve the problem.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Our website was built using Oracle WebCenter Interaction ...
    Yes, and that product indeed builds JSP pages.

    But it looks to me like somebody left the build incomplete *AND* left the build in DEBUG mode.

    Methinks that "other state agency" needs to get their act together and clean up that stuff!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    RE: Should I preload the images?

    Quote Originally Posted by Old Pedant View Post
    > Should I preload the images?

    ABSOLUTELY! I think the reason you may have the problem in IE is because it actually loads the page much much faster than CHROME does (don't ask me why! that's almost a first for IE in my experience).

    One easy way to preload the images that are initially hidden: Just put them in a
    Code:
    <div style="position: absolute; width: 1px; height: 1px; overflow: hidden; visibility: hidden;">
       <img .../>
       <img .../>
       <img .../>
       <img .../>
       <img .../>
    </div>
    That way they will count as part of the page-load time and yet not occupy any space (well, one pixel) on the page.
    I tried this but it didn't seem to solve the problem. I've attached a screenshot and my code, perhaps I haven't coded your suggestion properly. I uploaded new images trying to force the error to happen. It seems to happen the first time there are new images in place or the first time a user views the page in IE. After refresh, the problem doesn't seem to happen again but I need to fix the bug so that the images load properly the first time for all users.

    Thanks,

    Greg
    Attached Thumbnails Attached Thumbnails Why do my images not load correctly in IE?-preloaded-images-error.jpg  
    Attached Files Attached Files

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Yes, I saw that problem one time. So I know what you are talking about.

    But when I go to the page, now, I don't see the fix I suggested being in place.

    However...

    Looking more closely at the code, I don't think you needed it and I don't think it would have helped (as you found out).

    I honestly don't know what is causing it.

    It is *possible* that if you used my suggested fix *and* put the <div> that I suggested *JUST* after then <body> tag then it might help. Because that would cause those images to be loaded at the start of the page load, instead of near the end of those 25,000 lines as they are now.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Yes, I saw that problem one time. So I know what you are talking about.

    But when I go to the page, now, I don't see the fix I suggested being in place.

    However...

    Looking more closely at the code, I don't think you needed it and I don't think it would have helped (as you found out).

    I honestly don't know what is causing it.

    It is *possible* that if you used my suggested fix *and* put the <div> that I suggested *JUST* after then <body> tag then it might help. Because that would cause those images to be loaded at the start of the page load, instead of near the end of those 25,000 lines as they are now.
    Hello, sorry I took the preload code down when it didn't appear to work right away. I have it back on the page now (and just below the body tag as you suggested) and I'll leave it in place. Unfortunately I'm still getting an image hidden beneath another.

    Thanks for your replies, I appreciate you taking the time to try to help.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    I truly don't see why this is happening. It *feels* like a case of an image not being loaded fast enough. But even if you let the page "sit" for a few minutes before clicking on the arrow, the image is still missing.

    I will tell you this, and it *MIGHT* be the cause, though I couldn't see it in the source code: MSIE will *NOT* load an image if the <img> tag has a style of display: none;. And I haven't tested it, but I *think* that is true even if the <img> is in a container (e.g., a <div> or <li>) that has a style of display: none;.

    So you might poke around in the CSS and see if those <img>s are somehow getting such a style, either directly or from their container. If so, changing to visibility: hidden; may fix the problem. MSIE *does* load invisible images. Go figure.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    A change to the CSS seems to have solved the problem. The images are list items set to float left. Since it was always the last item in the list that would get hidden, I used clear right for the last item, this seems to have stopped the image overlap issue in IE.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    WOW. Never would have suspected that! Nice find.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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