chat loading...
Skip to Main Content
It looks like you're using Internet Explorer 11 or older. This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge. If you continue with this browser, you may see unexpected results.



  The library has limited services and changed hours due to the Coronavirus situation. Watch our Coronavirus page for the latest information..  


Animated GIFs as Instruction Tools - ILF Annual 2019 - Public: Animated GIF: Internet Speed Detection

This is a workshop guide developed for ILF Annual 2019, with extra boxes to allow public users to see the code used.

Introduction

This segment will cover "detecting" internet "speed." It uses a method where a small image is loaded, and the time that image takes to load determines the "speed." It is not entirely accurate, but a necessary pre-step to the next segment.

Code is deliberately not working and will be made to work during session. 

When prompted, please COPY the following link:

Speed test image

Important

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.

Needed

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.

Speed Detection

JavaScript is turned off, or your browser is realllllly slow

Code to Change

Image to show changes needed at imageAddr and downloadSize

Raw Code - First Section

<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>

Raw Code - Second Section

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

"Throttling" Speed

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.

Source

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