Announcement

Collapse
No announcement yet.

Broken image displays before actual image

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Broken image displays before actual image

    This is the strangest thing (and I may have brought this up before). When you go to the product page here, you first see a broken image in Chrome before the actual images display. How do I stop this behavior?
    Leslie Kirk
    Miva Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

    #2
    Hi Leslie,

    Do you have the source value of the image tag set to "graphics/en-US/cssui/blank.gif"?
    Matt Zimmermann
    Front-End Development Director / Miva, Inc.

    Comment


      #3
      Originally posted by Matt Zimmermann View Post
      Hi Leslie,

      Do you have the source value of the image tag set to "graphics/en-US/cssui/blank.gif"?
      No, this is what is there

      Code:
      <img id="main_image" class="x-product-layout-images__image" data-hook="product-image" data-index="0" data-mini-modal data-mini-modal-content="data-hook=photo-gallery-template" data-mini-modal-type="inline" src="&mvt:product:image;" alt="&mvte:product:name;" title="&mvte:product:name;">
      Leslie Kirk
      Miva Certified Developer
      Miva Merchant Specialist since 1997
      Previously of Webs Your Way
      (aka Leslie Nord leslienord)

      Email me: [email protected]
      www.lesliekirk.com

      Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

      Comment


        #4
        Hi Leslie,

        Unless the site is using the legacy product image, that will break. I would recommend switching it to the source I mentioned.
        Matt Zimmermann
        Front-End Development Director / Miva, Inc.

        Comment


          #5
          Originally posted by Matt Zimmermann View Post
          Hi Leslie,

          Unless the site is using the legacy product image, that will break. I would recommend switching it to the source I mentioned.
          Break as in never show an image? Or break as in the behavior I described / displayed?

          Would this then be the correct code?

          Code:
          <img id="main_image" class="x-product-layout-images__image" data-hook="product-image" data-index="0" data-mini-modal data-mini-modal-content="data-hook=photo-gallery-template" data-mini-modal-type="inline" src="graphics/en-US/cssui/blank.gif" alt="&mvte:product:name;" title="&mvte:product:name;">
          If so, there is a lag before the image loads but no broken image temporarily being displayed.
          Leslie Kirk
          Miva Certified Developer
          Miva Merchant Specialist since 1997
          Previously of Webs Your Way
          (aka Leslie Nord leslienord)

          Email me: [email protected]
          www.lesliekirk.com

          Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

          Comment


            #6
            Hi Leslie,

            Break as in what you are seeing. If you inspect the element, on load you will see that the source of the image is "unknown" and then it adds the correct source. In the case of using the blank GIF, that is the default that Miva has used for a long time so you should see no error on it.
            Matt Zimmermann
            Front-End Development Director / Miva, Inc.

            Comment


              #7
              I'm still baffled as to why there is this lag in loading which includes a flash of an image before the image loads.
              Leslie Kirk
              Miva Certified Developer
              Miva Merchant Specialist since 1997
              Previously of Webs Your Way
              (aka Leslie Nord leslienord)

              Email me: [email protected]
              www.lesliekirk.com

              Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

              Comment


                #8
                Hi Leslie,

                I am not seeing an image flash before the page loads. Have you tested in a browser without the inspector active?
                Matt Zimmermann
                Front-End Development Director / Miva, Inc.

                Comment


                  #9
                  Originally posted by Matt Zimmermann View Post
                  Hi Leslie,

                  I am not seeing an image flash before the page loads. Have you tested in a browser without the inspector active?
                  It seems to only happen when there are multiple images. I have seen it here.

                  Leslie Kirk
                  Miva Certified Developer
                  Miva Merchant Specialist since 1997
                  Previously of Webs Your Way
                  (aka Leslie Nord leslienord)

                  Email me: [email protected]
                  www.lesliekirk.com

                  Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                  Comment


                    #10
                    Hi Leslie,

                    That most likely comes from the initialization of the Slick plugin which is used when there are multiple images.
                    Matt Zimmermann
                    Front-End Development Director / Miva, Inc.

                    Comment


                      #11
                      matt, does the theme not lazy load images? hence the reason for using a data attribute to grab the actual image?
                      Bruce Golub
                      Phosphor Media - "Your Success is our Business"

                      Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
                      phosphormedia.com

                      Comment


                        #12
                        Hey Bruce,

                        Not as it is currently coded. Slick has some lazy logic in it, but nothing on the main image.
                        Matt Zimmermann
                        Front-End Development Director / Miva, Inc.

                        Comment


                          #13
                          Originally posted by Matt Zimmermann View Post
                          Hi Leslie,

                          That most likely comes from the initialization of the Slick plugin which is used when there are multiple images.
                          Is there any way to stop the behavior?
                          Leslie Kirk
                          Miva Certified Developer
                          Miva Merchant Specialist since 1997
                          Previously of Webs Your Way
                          (aka Leslie Nord leslienord)

                          Email me: [email protected]
                          www.lesliekirk.com

                          Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                          Comment


                            #14
                            Hi Leslie,

                            You might try adapting some of the native lazy loading practices used in Shadows and maybe altering the setting in the JavaScript/CSS to better fine-tine the loading display to your liking.
                            Matt Zimmermann
                            Front-End Development Director / Miva, Inc.

                            Comment

                            Working...
                            X