2 Replies Latest reply on Jan 28, 2009 4:24 PM by James O'Connor

    s:graphicImage + ie6 weirdness

    James O'Connor Newbie

      Hi all,


      I have a rich:datalist outputting a bunch of entities from the database; each entity has an associated Image entity that has a blob containing the data for the PNG - everything works fine except in ie6.


      In ie6, when the list is rendered, some of the s:graphicImages are rendered, some are not...if I refresh the page, some of the 'missing' images may appear (or not) and some of the ones that were rendered previously may disappear (or not). All of the images do exist, and if I hit the 'back' button and then use 'forward' to get back to the list ALL of the images are displayed. I've seen similar threads in this forum but nothing that seems to have addressed this ie6 specific issue. (FF3, IE7 both render everthing fine when the page loads).




      <rich:dataTable var="item" value="#{items.items}" rendered="#{items.items.size > 0}"  width="100%">
           <rich:column width="30" style="text-align: center;">
                <s:graphicImage alt="#{item.name}" title="#{item.name}" 
                     rendered="#{item.image != null}" value="#{item.image.data.binaryStream}" height="20" width="20">
                     <s:transformImageSize width="20" height="20"/>
                </s:graphicImage>
           </rich:column>
           <rich:column>
                <f:facet name="header">Application Name</f:facet>
                <h:ouputText value="#{content.name}"/>
           </rich:column>
      </rich:dataTable>




      The items bean looks like this: (note: this originally used the @factory pattern, but it produced the same results - missing images 'sometimes' in IE6 only, which would appear if you went 'Back' then 'Forward')



      @Stateful
      @Scope(ScopeType.EVENT)
      @Name("items")
      public class ItemsBean implements Applications {
           @PersistenceContext
           EntityManager entityManager;
           
           public List getItems(){
                List contents = entityManager.createQuery("from Items").getResultList();
                return contents;
           }
      }




      The data on the Image entity is defined as: (db is Oracle 11g)



      @Entity
      @Table(name = "IMAGE")
      public class Image implements java.io.Serializable {
      
           private Blob data;
           
           @Column(name = "DATA", nullable = false)
           @NotNull
           public Blob getData() {
                return this.data;
           }
      
           public void setData(Blob data) {
                this.data = data;
           }
      }





      As I said, the weirdest part for me is when I hit the back button and then navigate forward ALL the images are visible. Any help on an attack vector for this problem would be appreciated...thanks.


      James

        • 1. Re: s:graphicImage + ie6 weirdness
          Julien Kronegg Novice

          Images seems to be loaded asynchronously under MSIE6. I had the same problems with scripts in .js files and CSS files which are loaded after the whole page is generated.


          I see two possible solutions:



          • generate a piece of javascript which force pre-loading the images (before the whole page is generated). Of course this script would be generated by your XHTML page, and only under MSIE6

          • add a piece of javascript called after the page is loaded (maybe each 0.5s via the setTimeout() function). In this script, check the state of all images in the page (via the document.getElementsByTagName("IMG")). For scripts, the property readyState is equals to complete or loaded if the script is loaded (the same property would probably exist for images). Once loaded, each image would be redisplayed (I don't know how to do it, maybe changing twice the style.display property, or maybe using a page reload)



          • 2. Re: s:graphicImage + ie6 weirdness
            James O'Connor Newbie

            Hi, thanks for your suggestions. My first thought as well was to preload the images, but after some experimentation I didn't think this is viable since the images don't exist in the graphicstore until after the first call to s:graphicImage for each image.


            The solution (pronounced 'hack') that I have operational at the moment is to rerender the icons through a4j directly below the rich:datatable (after wrapping the icons in an a4j:outputPanel with a defined id, and adding a unique fileName property on the s:graphicImage)


            <a4j:jsFunction name="rerenderIconImages" requestDelay="100" reRender="iconImage"/>
            <!--[if IE 6]>
            <script type="text/javascript" language="javascript">
                 rerenderIconImages();
            </script>
            <![endif]-->



            Basically, on initial page load, the issue is still there but after the rerender all icons are present.


            Oh yeah, I also switched the ItemsBean back to using the @factory pattern for posterity and switched back to a SMPC which was necessary to avoid LIEs on the re-render.