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

    Miva Web Developer
    Alchemy Web Development
    https://www.alchemywebdev.com
    Site Development - Maintenance - Consultation

    Miva Certified Developer
    Miva Professional Developer

    https://www.dev4web.net | Twitter

    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

        Miva Web Developer
        Alchemy Web Development
        https://www.alchemywebdev.com
        Site Development - Maintenance - Consultation

        Miva Certified Developer
        Miva Professional Developer

        https://www.dev4web.net | Twitter

        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

            Miva Web Developer
            Alchemy Web Development
            https://www.alchemywebdev.com
            Site Development - Maintenance - Consultation

            Miva Certified Developer
            Miva Professional Developer

            https://www.dev4web.net | Twitter

            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

                Miva Web Developer
                Alchemy Web Development
                https://www.alchemywebdev.com
                Site Development - Maintenance - Consultation

                Miva Certified Developer
                Miva Professional Developer

                https://www.dev4web.net | Twitter

                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

                    Miva Web Developer
                    Alchemy Web Development
                    https://www.alchemywebdev.com
                    Site Development - Maintenance - Consultation

                    Miva Certified Developer
                    Miva Professional Developer

                    https://www.dev4web.net | Twitter

                    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

                        Miva Web Developer
                        Alchemy Web Development
                        https://www.alchemywebdev.com
                        Site Development - Maintenance - Consultation

                        Miva Certified Developer
                        Miva Professional Developer

                        https://www.dev4web.net | Twitter

                        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

                            Miva Web Developer
                            Alchemy Web Development
                            https://www.alchemywebdev.com
                            Site Development - Maintenance - Consultation

                            Miva Certified Developer
                            Miva Professional Developer

                            https://www.dev4web.net | Twitter

                            Comment

                            Working...
                            X