TableSorter's weird image loading

Question

Since I am now debugging my frontend on Chrome, there a weird behavior of TableSorter plugin when it's applied to a table in the page while scrolling, sorting, etc. It's trying to load string/binary data by this url (at least 10 of them simultaneously):

Request URL:data:image/gif;base64,R0lGODlhAQABAIAAAP8AAAAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==

These kind of requests are disruptively annoying when you try to focus on debugging requests to the server.

Any help is appreciated!

Note that this behavior is observed only when applying TableSorter plugin.

Code to initialize the plugin:

$('.tableSorter').tablesorter({
        theme : 'blue',
        // initialize zebra striping and resizable widgets on the table
        widgets: [ "zebra", "resizable", "columns", "cssStickyHeaders", "filter" ],//"saveSort" 
        resizable_widths :  RFM.width,
        usNumberFormat : false,
        widgetOptions: {
            resizable_addLastColumn : true,
          resizable : true,
          cssStickyHeaders_offset        : 50,
          cssStickyHeaders_addCaption    : true,
          cssStickyHeaders_filteredToTop : true,
          cssStickyHeaders_zIndex        : 10,
          cssStickyHeaders_attachTo : null
        },
        headers: { 
            0:{
                sorter: false 
            }
        }
    }).tablesorterPager({container: $("#pager"), output: RFM.lang.pager, savePages : false});

CSS files:

<link rel="stylesheet" href="js/plugins/tablesorter/theme.blue.css">
<link rel="stylesheet" href="js/plugins/tablesorter/jquery.tablesorter.pager.css">

JS files:

 <script src="js/plugins/tablesorter/jquery.tablesorter.min.js"></script>
 <script src="js/plugins/tablesorter/jquery.tablesorter.widgets.js"></script>
 <script src="js/plugins/tablesorter/jquery.tablesorter.pager.js"></script>
 <script src="js/plugins/tablesorter/widget-cssStickyHeaders.js"></script>

Answer 1

Oh, I think what the issue might be. Within the theme.blue.css file is this definition which adds the header sort arrows to 10 of your columns:

.tablesorter-blue .header,
.tablesorter-blue .tablesorter-header {
    /* black (unsorted) double arrow */
    background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
    /* white (unsorted) double arrow */
    /* background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAAP///////yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==); */
    /* image */
    /* background-image: url(images/black-unsorted.gif); */
    background-repeat: no-repeat;
    background-position: center right;
    padding: 4px 18px 4px 4px;
    white-space: normal;
    cursor: pointer;
}

Your debugger appears to be attempting to actually load the base64 encoded images.

I don't know how to prevent your debugger from doing this, but maybe if you comment that line out and uncomment out the line that points to an actual image url(images/black-unsorted.gif); this might resolve the issue.