In my website at https://www.datanumen.com, when loading it, there will be an arrow beside the "COMPANY" and "PARTNERS" menu items, as below:
However, after using WP Rocket and Cloudflare, the arrows disappear.
After many tests, we find out:
-
If both WP Rocket and Cloudflare Cache are enabled, then after the web page is loaded. Then with user inseract, such as moving the mouse, the arrow will appear for a short time, then disappear.
-
If only WP Rocket is enabled, and disable Cloudflare Cache(set to Development mode), after the web page is loaded, with the user interact, the arrow will appear and NEVER disappear.
-
If I disable the "Delay JavaScript execution" option in WP Rocket and disable Cloudflare Cache, then the arrow will appear without any user interaction and will NEVER disappear.
So, I want to figure out:
- Which javascript is used to load the arrow? I need to add it to the exclusion list for "Delay JavaScript execution" option in WP Rocket so that it will appear without user interaction.
- Why Cloudflare cache will cause it disappear? I need to prevent it disappear when Cloudflare Cache is enabled.
Update
Two experts suggest that js/superfish.min.js may be the file that is used to load the arrows. So I add it to the exclusion list for "Delay JavaScript Execution", but this time Chrome will report an error "jQuery is not defined". I follow the instructions at https://docs.wp-rocket.me/article/1496-how-to-fix-the-jquery-is-not-defined-error and add /jquery-?[0-9.]*(.min|.slim|.slim.min)?.js to the exclusion list as well. This time the error disappear, but the arrows will still appear AFTER user interaction. So it seems they are not loaded by superfish.min.js?
Update 2
After contacting Cloudflare and making some tests, I disable "Auto Minify CSS" option in Cloudflare, then the problem that the arrow will disappear after Cloudflare cache is enabled will disappear.
Now I try to figure out how the arrow is loaded.
I do as follows:
- In Chrome DevTools, I inspect the arrow element and see the following result:
It seems that the arrow comes from a svg image which is described in CSS.
- I go to "Network" tab and try to find the arrow by input "arrow"/"angle"/"down", etc. in the filter, but cannot get the element, see below:
So, how to associate the element with the network resources in the "Network" tab so that I can find out how the element is loaded?
from Figure out how an element is loaded in webpage via Chrome DevTools?
No comments:
Post a Comment