A small image is used in this segment to cut down on how long the "detection" process takes for slower connections.

On LibGuides, content items that are exclusively code look "blank."

The page needs to be reloaded after code changes to see if it works.

Actual test image size (in bytes)

1. Save image to your PC
2. Open folder where saved
3. Right click on image/file
4. Click Properties
5. Note Size (NOT size on disk)

In this case, the correct number is 723 bytes.

Detected "speeds"

During this step, we will use Google Chrome options to simulate slower internet speeds. Note these speeds in kbps somewhere for use in the next segment.

JavaScript is turned off, or your browser is realllllly slow

<script type="text/javascript">
var imageAddr = "PLACE SPEED TEST IMAGE HERE"; 
var downloadSize = PLACE FILE SIZE OF SPEED TEST IMAGE IN BYTES HERE; //bytes

function ShowProgressMessage(msg) {
    if (console) {
        if (typeof msg == "string") {
            console.log(msg);
        } else {
            for (var i = 0; i < msg.length; i++) {
                console.log(msg[i]);
            }
        }
    }
    
    var oProgress = document.getElementById("progress");
    if (oProgress) {
        var actualHTML = (typeof msg == "string") ? msg : msg.join("<br />");
        oProgress.innerHTML = actualHTML;
    }
}

function InitiateSpeedDetection() {
    ShowProgressMessage("Loading the image, please wait...");
    window.setTimeout(MeasureConnectionSpeed, 1);
};    

if (window.addEventListener) {
    window.addEventListener('load', InitiateSpeedDetection, false);
} else if (window.attachEvent) {
    window.attachEvent('onload', InitiateSpeedDetection);
}

function MeasureConnectionSpeed() {
    var startTime, endTime;
    var download = new Image();
    download.onload = function () {
        endTime = (new Date()).getTime();
        showResults();
    }
    
    download.onerror = function (err, msg) {
        ShowProgressMessage("Invalid image, or error downloading");
    }
    
    startTime = (new Date()).getTime();
    var cacheBuster = "?nnn=" + startTime;
    download.src = imageAddr + cacheBuster;
    
    function showResults() {
        var duration = (endTime - startTime) / 1000;
        var bitsLoaded = downloadSize * 8;
        var speedBps = (bitsLoaded / duration).toFixed(2);
        var speedKbps = (speedBps / 1024).toFixed(2);
        var speedMbps = (speedKbps / 1024).toFixed(2);
        ShowProgressMessage([
            "Your connection speed is:", 
            speedBps + " bps", 
            speedKbps + " kbps", 
            speedMbps + " Mbps"
        ]);
    }
}
</script>

<h1 id="progress">JavaScript is turned off, or your browser is realllllly slow</h1>

Google Chrome includes a useful tool to test internet speeds. This will be needed to see what "speeds" are detected at each actual speed for this segment.

1. Click on three dots at upper right
2. Hover over "More tools"
3. Click on "Developer tools"
4. Click the "Network" tab
5. Use the drop-down for "Online" to simulate Fast 3G and Slow 3G

Note: must keep developer tool open when reloading to see "throttling" changes.

Shadow The Princess Wizard. (2011, April 3). Message posted to StackOverflow.