chat loading...
Skip to Main Content

Indiana University Northwest Indiana University Northwest IU Northwest


Animated GIFs as Instruction Tools - ILF Annual 2019 - Public: Animated GIF: Image by Speed

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 use information gathered from the previous speed detection segment to present different images based on speed. While there may be better, more complicated ways to achieve this (e.g. with jQuery), this code is meant to be easily used without extensive programming knowledge or resources.

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

When prompted, please COPY the following links:

Animated GIF

Static image

Speed test image

Important!

This code requires the Javascript to sit below where it will be displayed.

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

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

Image by Internet Speed

This is an example of images changing based on internet speed.

Code to Change

At top

At bottom

Raw Code - First Section

<img id="myImage" alt="This is an example of images changing based on internet speed.">

Raw Code - Second Section

<script type="text/javascript">
var imageAddr = "http://libapps.s3.amazonaws.com/accounts/896/images/trident-large.png"; 
var downloadSize = 723; //bytes
 
 
var image = document.getElementById("myImage");
 
var img1 = new Image();
 
img1.onload = function() {
 div.innerHTML += '<img src="'+img1.src+'" />'; 
};
img1.src = 'PLACE SPEED TEST IMAGE HERE';
 
 
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);
 
if (speedKbps > SET NUMBER ABOVE SLOW 3GS SPEED HERE) {
        image.src = "PLACE ANIMATED GIF HERE";
}
else {
        image.src = "PLACE STATIC IMAGE HERE";
}
    }
}
 
</script>

Note

Please note that to make this segment easier and faster, the imageAddr and downloadSize variables are already filled in with the speed test image information.

Sources

Alexas_Fotos (n.d.). Rubber duck school-leaving - Free photo on Pixabay [Image file].

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