Lazy load not working on android and other mobile devices?

webmaster's Avatar

webmaster

07 Nov, 2016 08:01 PM

Our users have just reported that in our slider the thumbs display correctly but some images do not. I can reproduce this on android with dolphin browser and on i-pads that are older. Example slider has 24 images. lazy load is set to default of 4. All thumbnails display correctly. But photos 1-5 display, 6- 21 do not, and then 21-24 display correctly. If I change preload to 6 for instance it just changes the point at which images do not display.

You can check this here if you want on your mobile device. Seems to work fine in firefox but not dolphin or safari consistently:

http://www.terravistarealty.com/single-property-details.cfm?PID=CMLS3227385

Any suggestions greatly appreciated.

  1. 1 Posted by webmaster on 07 Nov, 2016 08:15 PM

    webmaster's Avatar

    Just a note, even with preload off it seems to do the same thing at the same number of images?

    usePreloader: false,
    numImagesToPreload: 0

  2. 2 Posted by webmaster on 08 Nov, 2016 02:20 AM

    webmaster's Avatar

    Ran a test and set number of images to preload to 24 since there are 24 images. Result was image 13 is always blank. Can anyone help with this before we try a different mobile friendly slider?

    Reproduced with dolphin browser on a kindle and on a nexus 7

    Thanks

  3. Support Staff 3 Posted by Dmitry Semenov on 08 Nov, 2016 07:39 AM

    Dmitry Semenov's Avatar

    Hello,

    You have incorrect markup for lazy-loaded images and your current slider loads all images at once on page load, you can take a look at correct markup here http://dimsemenov.com/plugins/royal-slider/documentation/#images

    If you have images in slide that don't have rsImg class, slider won't apply any preloading to them, try inspecting the slider via chrome dev tools to check why your images aren't loaded https://developers.google.com/web/tools/chrome-devtools/remote-debu...

    Dmitry

  4. 4 Posted by webmaster on 08 Nov, 2016 01:43 PM

    webmaster's Avatar

    If I had incorrect markup then why do all images work on pcs/tablets and most mobile devices and only fail to load on devices like iphone/ipad and android with dolphin browser?

    Thanks for responding

  5. 5 Posted by webmaster on 08 Nov, 2016 01:58 PM

    webmaster's Avatar

    I added the class to the images you said was needed and it works fine on pc but on android with dolphin browser the spinning icon shows and no images load, only the thumbnails load?

    I have removed the class now because no images would load on mobile at all, just the loading icon and thumbnails

    Without the class you say is needed for preloading, if I set numImagesToPreload: 24, all 24 images except number 13 load.
    The 13th image is blank. If it is not using preloading then why would the setting above affect how many images load blank?

    Thanks

  6. Support Staff 6 Posted by Dmitry Semenov on 09 Nov, 2016 07:37 AM

    Dmitry Semenov's Avatar

    You have display:none;visibility:hidden; style on the images fro some reason, that's why it's blank, your script does not remove it. You might want to listen for events like rsAfterSlideChange to apply actions to slides dynamically.

  7. 7 Posted by webmaster on 09 Nov, 2016 11:17 AM

    webmaster's Avatar

    We are not setting those styles, your script must be doing this and only on certain browsers on mobile. Why do you not understand what I have explained is happening?

    Here is the html code for a typical image in our slider as generated by your script and there is nothing hidden

    <div style="left: 2592px;" class="rsSlide "><div data-rstmb="RETSFEEDS/newIdxMedia/28207/Photo-40597268-5.jpg">
    <img id="mainphoto" src="RETSFEEDS/newIdxMedia/28207/Photo-40597268-5.jpg" width="640">


    <div class="rsSlideCountMobile" style="width:100%;height: 20px; position:absolute;bottom:0;background-color: rgba(0, 0, 0, 0.5);color: White;text-align:center;line-height:20px;">Photo 1 of 24</div>
    </div></div>

  8. 8 Posted by webmaster on 09 Nov, 2016 02:43 PM

    webmaster's Avatar

    Can you test this page in dolphin browser on android?

    http://www.terravistarealty.com/single-property-details.cfm?PID=CMLS3227385

    You will find that only image 13 is blank. This happens for every real estate listing with 24 images. We are not lazy loading but for example if I leave at defaults then images 6-21 are all blank. I even tested this with your most recent version.

    Works correctly in firefox, opera, chrome on android

    Is there some problem with jquery in dolphin browser?

  9. Support Staff 9 Posted by Dmitry Semenov on 09 Nov, 2016 04:24 PM

    Dmitry Semenov's Avatar

    We are not setting those styles, your script must be doing this and only on certain browsers on mobile. Why do you not understand what I have explained is happening?

    You are adding the styles. They are added by your server in mobile browsers, all other images of your page also have them, e.g. logo.

  10. 10 Posted by webmaster on 09 Nov, 2016 04:35 PM

    webmaster's Avatar

    If that is true then why is it only the 13th image that will not display, yet all 24 thumbnail images display.

    We do not have any code on our server that sets all images to be hidden on mobile, if that was the case then none of
    the site images would display correctly

    ______________________
    Forrest M Mahannah
    www.ColdFusionMechanic.com

  11. Support Staff 11 Posted by Dmitry Semenov on 09 Nov, 2016 09:54 PM

    Dmitry Semenov's Avatar

    We do not have any code on our server that sets all images to be hidden on mobile

    You do, attached screenshot.

    If that is true then why is it only the 13th image that will not display, yet all 24 thumbnail images display.

    Likely, because third party script that replaces image sources runs after RoyalSlider is initialized, so slides that are not currently in DOM aren't revealed.

  12. 12 Posted by webmaster on 09 Nov, 2016 10:38 PM

    webmaster's Avatar

    OK now I can see what you mean. I can’t view source in my mobile browser so I could not see the extra markup being added to images.
    What are you using to view source on mobile browsers?

    It turns out that we are running Cloudflare CDN on our sites to improve performance, but they use a feature called Mirage to try to
    improve image load speed only on mobile devices. We were not aware of that until now thanks to you.

    We have asked them to turn this “feature” off and will let you know if that fixes our issues with your slider. I hope it does because
    your slider has worked so well for us up until now.

    Thanks again for pointing this out to use and if you can please tell me what mobile browser lets you view the source?

    ______________________
    Forrest M Mahannah
    www.ColdFusionMechanic.com

  13. Support Staff 13 Posted by Dmitry Semenov on 10 Nov, 2016 07:07 AM

    Dmitry Semenov's Avatar

    Open desktop chrome, toggle device toolbar, select UA (e.g. iPad), refresh page, right click page -> view source.

  14. 14 Posted by webmaster on 10 Nov, 2016 07:54 PM

    webmaster's Avatar

    Thank you so much, it was the CDN markup on mobile that was breaking your slider!

    We never would have figured this out without you sending us the html source where we could see the img tag markup

  15. 15 Posted by steve on 12 Nov, 2017 11:04 AM

    steve's Avatar

    Did you ever manage to fix this problem with Cloudflare??
    I am in discussion with them at the moment regarding their Mirage product which does not scale correctly.

  16. 16 Posted by webmaster on 12 Nov, 2017 03:22 PM

    webmaster's Avatar

    No I did not. we basically just stopped using Cloudflare completely as it modifies the css for images and caused other issues with our code

    ______________________
    Forrest M Mahannah
    www.ColdFusionMechanic.com

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac