Troubleshoot: Correct API Flicker in Site Customization

  • Updated

What is flicker and why does it happen?

When API sends out a request, it takes a brief amount of time for that process to happen. An API call needs to pass to the user’s IP and connect to the library. Then the data need to process and return to your website page. This necessary series of events can cause “flicker.” With client-side customization, flicker becomes much more noticeable, because it's no longer hidden in the background. 

Our recommended solution

Hide the initial default element being customized and run a poll function like the attached file. To use this solution:

-Wrap whichever elements as display: none or visibility: hidden (optional to your team), so that the default image does not appear immediately. If the element doesn’t have a class or id, it is recommended to add one.

-Add polling function after both the Demandbase Tag and the element to be customized on the page are available.

On top of resolving for the flash, this function has the additional benefit of not holding up the page load. Whenever the elements are all available, this is intended to run (or max out), no need to use the extra poll if at the end of an earlier poll count all needed parts are available. This solution is intended to be hosted client side for best performance.

    try{

        // feel free to adjust the poll interval and count per your preference

        var POLL_INTERVAL = 25;

        var MAX_POLL_COUNT = 40;

        var pollCount = 0;

        function poll() {

            pollCount++;

            if ((window.Demandbase && window.Demandbase.IP.CompanyProfile) || pollCount === MAX_POLL_COUNT) {

                clearTimeout(poll);

                var attr = document.querySelector(SELECTOR).attr('style');

    if (typeof attr == typeof undefined || attr == false) {

                    document.querySelector('SELECTOR').each(function(){

                        this.style.setProperty('background-image', 'url(https://www.something.com/someimage.jpg)', 'important');

                    });

                }




            } else if (pollCount < MAX_POLL_COUNT) {

                setTimeout(poll, POLL_INTERVAL);

            }




        } poll();

    }catch(e){

if(window.console){console.log("DB__ "+e.message);}

}

 

Was this article helpful?

0 out of 0 found this helpful