除非有时将元素悬停在inspect内，否则有时会用Javascript加载HTML内容

Question

I have made a widget. The content of this is loaded dynamically by JS. However, sometimes when a page loads the data does not show up on the widget unless it is clicked upon. Even going into inspect and hovering over any element loads the items. The two images below are before and after click.

Update 1 - Click doesn't necessarily loads the data but hovering inside inspect element does.

Update 2 - This seem to get fixed if I call the function to put data multiple times. Note: I have 15 sec timer to call the function, however if I reduce the interval of first 4 runs, it fixes. However, this seems like a workaround and not a solution.

Update 3 - As Suggested, this appears more of a css issue Created a Fiddle

Here is the function that is putting the data

function putData(dataSet) {
if(dataSet.length == 3) {
    document.getElementById('liveBlock').style.display = 'none';
    document.getElementById('upcomingCompletedBlock').style.display = 'block';
    for(var i=1; i<=3; i++) {
        title = dataSet[i-1].title;
        teams = title.split(' vs ');
        homeTeamName = teams[0];
        awayTeamName = teams[1];
        homeTeam = dataSet[i-1].homeTeamLogoUrl;
        awayTeam = dataSet[i-1].awayTeamLogoUrl;
        document.getElementById('botCupLogo'+i+'1').src=homeTeam;
        document.getElementById('botCupLogo'+i+'2').src=awayTeam;
        document.getElementById('botCupName'+i+'1').innerHTML=homeTeamName;
        document.getElementById('botCupName'+i+'2').innerHTML=awayTeamName;

        if(dataSet[i-1].matchStatus == 'UPCOMING') {
            var date = new Date(dataSet[i-1].startDateTime);
            document.getElementById('summaryText'+i).innerHTML = date;
        }
        else if(dataSet[i-1].matchStatus == 'COMPLETED') {
            document.getElementById('summaryText'+i).innerHTML = dataSet[i-1].summaryText;
        }
    }
}

It is called by a different function which fetches data from an API. The data is correctly fetched and passed into this function

Answer 1

I have made a widget. The content of this is loaded dynamically by JS.

Do you mean you add the HTML content by JS? I bet that there is a coordination issue. Maybe the function that adds this content, call it createContent , fires one or more times after your putData function, and overwrites the DOM elements to their initial values. Or maybe putData fires early and the elements are not loaded.

This seem to get fixed if I call the function to put data multiple times.

Which supports the coordination issue hypothesis.

Advices

• Wrap your putData function content in a try catch . It will prevent your JS from crash and will help you to debugging.

  Since you are manipulating DOM elements that could not be loaded or targeted. Something like this:

function putData(dataSet) {
    try {
        // add your code here
        return true;
    } catch (reason) {
        console.error(reason); // <-- pay attention to the console
        return false;
    }
}

• Do not call the putData multiple times ramdomly. Instead, call it when the HTML content is ready.

  For example, at the end of createContent you can call the function that fetches the data and then putData with its response. Another option is to use a custom event and dispatch it at the end of createContent .

• Inside the proposed function createContent , check if content is alreadty loaded. And if isLoaded , do not load it again.

Hope it helps.

Answer 2

Here you go: https://jsfiddle.net/zqxa0fL8/

What I had to do is to remove the unnecessary perspective(1200px) from all CSS rules except mybot .cube

The red side still has an issue, as it's CSS differs from the other sides. Should be fine after you do a refactoring.

Too much CSS stuff in your code. Try minimize the code only to what is needed.

UPDATE:

See: https://jsfiddle.net/8u24pyeq/ Turns out the issue is because of backface-visibility . You need to wait before page renders and only then apply the setting.