[Resolved] Preload images before transition doesn't seem to be working for my slider

[Author]

Posts

[MarkT8581]

I am trying to: have a slider that doesn't transition to the next slide until the next slide (with background image) is fully loaded so that the transition looks perfect.

I visited this URL: hidden link - this is the new site I'm working on. The homepage has a big slider.

I expected to see: Perfect transitions

Instead, I got: Transitions and then the background image is still loading.

I'm using the following code with my Avada theme to easily have the the background image be full width as well as have a parallax effect, etc. I'm thinking that maybe that is why the image isn't preloading. I'm not sure what the requirements are for the preloading to work.

[fullwidth background_color="" background_image="[types field="main-image" size="full" url="true"][/types]" background_parallax="fixed" enable_mobile="no" parallax_speed="0.3" background_repeat="no-repeat" background_position="center center" video_url="" video_aspect_ratio="16:9" video_webm="" video_mp4="" video_ogv="" video_preview_image="" overlay_color="" overlay_opacity="0.5" video_mute="yes" video_loop="yes" fade="no" border_size="0px" border_color="" border_style="solid" padding_top="550" padding_bottom="20" padding_left="0" padding_right="0" hundred_percent="yes" equal_height_columns="no" hide_on_mobile="no" menu_anchor="" class="" id=""]
<h2>[wpv-conditional if="( $(wpcf-state) ne '' )"][wpv-post-link] | [types field="city"][/types], [types field="state"][/types][/wpv-conditional][wpv-conditional if="( $(wpcf-state) eq '' )"][wpv-post-link id="$construction-project"] | [types field="city" id="$construction-project"][/types], [types field="state" id="$construction-project"][/types][/wpv-conditional]</h2>[/fullwidth]

Thanks in advance!

[Waqas Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Can you please try without that fullwidth short code? I mean try a simple views slider with those preload options, to test if it works fine by default. I am not sure how the fullwidth short code affecting the slider but since it has it's own options, there may be a conflict in this case.

On the other hand, I request to share the slider view's screen shot (full page in edit mode), so I can take a look at your slider's configuration as well.

Please let me know, thanks.

[MarkT8581]

Thank you. It still seems to still be happening when I don't have any shortcodes from my theme... especially for the initial switch from the first to the 2nd image. It will fade to white, and then the 2nd image loads vertically on the screen instead of cross-fading. Sometimes the spinner even stays on till the 3rd image. Eventually it will crossfade between the slides, but I'm guessing that is after all the slides/images have been cached, but even then, if I keep switching slides, a lot of time I see the image loading vertically again instead of crossfading between already loaded images.

I've attached a screenshot of what I switched my code to along with all of the view's settings... although I'm not currently happy with it at this point because of the way it scales when the width goes down. I'd rather have the image be a background image so that it scales all the way down to a mobile device better.... and using the theme's shortcodes I can easily use the parallax effect.

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Unfortunately Waqas is on holiday. This is Minesh here and I'll take care of this ticket now. Hope this is OK.

1)
I think you should try to use low resolution image and check it it helps as well as try to use 3rd party cache plugin if that helps.

2)
If your issue still persist:
*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I would additionally need your permission to de- and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important. If you agree to this, please use the form fields I have enabled below to provide temporary access details (wp-admin and FTP).

I have set the next reply to private which means only you and I have access to it.

[MarkT8581]

Thank you for your assistance. At this point I'm just going to add the 3rd party cache plugin and move forward.... hope that that fixes it and and hope the client doesn't mention it if it doesn't 🙂