Slow execution of jQuery script
-
Hello,
I have created a website on which expandable buttons that show information loaded from another file are used.
The script in use preloads the external file that contains the information on page load. Then, when a button is clicked, it checks whether or not the information is available and, if it is, the button expands.
The problem is that, even though the file is successfully preloaded, it takes at least 3 seconds until the buttons that have been clicked are expanded. For what it is worth, let me say that this script works perfectly on static websites, so it is possible that I need to take some WP-related factor that I am not aware of into account. Let me add that I have just started using WP, so I am sure there are a lot of things that I still need to learn.
The script used is the following:
// Load external document on page load $(document).ready(function () { $.ajax({ url: "absolute/path/to/info/file", dataType: "html", }); }); // Show button content on click $("a.ajax-link").click(function (event) { event.preventDefault(); event.stopPropagation(); // Prevent from expanding var infoButton = $($(this).attr("href")); if (!$(infoButton).hasClass("show")) { // Check if the button is collapsed if ($(infoButton).attr("data-loaded") != "true") { var loadingIcon = $(this).find(".icon-spin"); // Show loading icon loadingIcon.css("visibility", "visible"); var thisLink = $(this); var targetUrl = thisLink.attr("data-href"); var target = thisLink.data("ajaxtarget"); // Load data $(target).load(targetUrl, function () { $(infoButton).collapse("show"); // Expand $(infoButton).on("show.bs.collapse", function () { $(this).addClass("collapsing"); }); loadingIcon.css("visibility", "hidden"); }); } else { $(infoButton).collapse("hide"); $(infoButton).on("hide.bs.collapse", function () { $(this).removeClass("collapsing"); }); } noMoreAjax(); } else { $(infoButton).collapse("hide"); $(infoButton).on("hide.bs.collapse", function () { $(this).removeClass("collapsing"); }); } }); // FUNCTIONS function noMoreAjax(item) { var linkItem = $(item); linkItem.removeClass("ajax-link"); linkItem.addClass("link-prevent"); linkItem.unbind("click"); $(linkItem).click(function (event) { event.preventDefault(); }); }Could you tell me if there is something I can do to make the buttons expand without that delay when clicked?
If there is any other piece of information that could be of use to you, please let me know. Thank you very much for your time.
The topic ‘Slow execution of jQuery script’ is closed to new replies.