SharePoint 2013 Rating Control Rendering issue with IE

If you have the “AverageRatingFieldControl” added to a custom page layout in SharePoint 2013, and visited by Internet Explorer 10 or newer, you will notice that the images are not loaded after the initial page load, but they do show up after a page refresh.

Root Cause:

The reason for this odd behavior is, JavaScript execution order, which have changed slightly from SharePoint 2010 to SharePoint 2013. Really a fix should be supplied by Microsoft, but until that happens we have to do something ourselves. 

Solution:

What we need to do is to re-execute the JavaScript responsible for setting up the star images and the rating control, when everything on the page have been properly loaded. The easiest way to do so is adding the following JavaScript to our page layout(it requires JQuery to be loaded).

function fixIEStarRatingIssue()     {         if (SP.UI.Reputation != null) {             SP.UI.Reputation.RatingsHelpers.$c(false);             jQuery('.pagerating > script').each(function () {                 eval($(this).text());             });         }     } _spBodyOnLoadFunctionNames.push('fixIEStarRatingIssue');

We have to change the code “jQuery(‘.pagerating > script’)” to match your markup so that is properly selects the JavaScript emitted by the "AverageRatingFieldControl", here is how my markup looks.

Hope this help you...