I am currently dealing with a jQuery plugin that is quite large and complex, but I will not be sharing it here to keep things simple. The issue I am facing is relatively straightforward, so I will focus on the essential code snippets:
There is a click event attached to a group of buttons:
$("ul.tick-boxes button").click(function(event) {
event.preventDefault();
$("ul.product-grid").addClass("loading");
$(this).toggleClass("active");
$theElement.trigger("filterOptionsChanged");
});
If you visit this link, you can observe these buttons in action within the left sidebar:
This CSS snippet generates a checkmark when you click on the buttons:
ul.tick-boxes button.active .tick-box::after {
content: "\e603";
font-family: "custom-icons";
color: #51425d;
top: 2px;
left: 2px;
font-size: 0.75rem;
position: absolute;
}
When clicking these filter options, there is a noticeable delay in my computer's rendering process for the tick-box animation. Despite the instant toggle of the 'active' class, the visual update lags until after the product grid has been manipulated. This paradoxical behavior raises the question as to why the tick-box rendering waits for the completion of the 'filterOptionsChanged' event instead of occurring simultaneously or beforehand.
Upon closer inspection using Chrome Developer Tools, I noticed that the active classes are toggling instantly upon clicking, indicating that the issue lies within the CSS rules governing the tick-mark display.
To address this problem, I experimented by preemptively displaying the tick-marks through modifying the CSS properties even before the buttons were clicked. Despite this optimization attempt, the lag persisted.
In an effort to isolate the root cause, I temporarily disabled the 'filterOptionsChanged' event trigger. Surprisingly, this led to a significant improvement in rendering speed, suggesting that the delayed activation of the tick-boxes was somehow correlated with the execution of this particular event.
Exploring alternative solutions, I delved into utilizing jQuery Deferreds to stagger the execution of the class changes and event triggering. However, this approach failed to yield the desired outcome, leaving me puzzled about the underlying cause of this rendering delay.