Skip to content

Instantly share code, notes, and snippets.

@Polyducks

Polyducks/responsive-images.html

Last active December 5, 2016 14:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Polyducks/dcc4b270f0f458bf261101e8bfac6103 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Polyducks/dcc4b270f0f458bf261101e8bfac6103 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Polyducks revised this gist Dec 5, 2016. 1 changed file with 1 addition and 3 deletions.
    4 changes: 1 addition & 3 deletions responsive-images.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,6 @@
    <img data-mob-src="mobile.png" data-desk-src="desktop.png" />

    <script>

    /*
    RESPONSIVE-IMAGES
    @@ -33,7 +32,7 @@

    (function(){

    var instructions = "see original file for commented instructions";
    var instructions = "see uncompressed file for instructions";

    //SETTINGS
    var defaultThreshold = 800;
    @@ -96,6 +95,5 @@
    });
    }
    })();


    </script>
  2. Polyducks revised this gist Dec 5, 2016. 1 changed file with 28 additions and 13 deletions.
    41 changes: 28 additions & 13 deletions responsive-images.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,9 +4,8 @@
    <script>

    /*
    RESPONSIVE-IMAGES
    ._______________________. .________.
    || || /| |\ | |
    || || / '----' \ | |
    @@ -15,14 +14,30 @@
    || || \ ,----, / | |
    || || \| |/ | |
    ;L____________________(); ;___()___;
    Just add these attributes to your img tag(s):
    mobile image source:
    data-mob-src="www.x.com/y/mobile.jpg"
    desktop image source:
    data-desk-src="www.x.com/y/desktop.jpg"
    optional responsive threshold:
    data-threshold="900"
    <img data-mob-src="mobile.png" data-desk-src="desktop.png" data-threshold="900" />
    Then include this js at the foot of the page.
    */

    (function(){


    var instructions = "see original file for commented instructions";

    //SETTINGS
    var defaultThreshold = 750;
    var defaultThreshold = 800;

    //ELEMENTS
    //all img tags with data-mob-src
    var imageList = Array.prototype.slice.call( document.querySelectorAll("img[data-mob-src]") );
    @@ -37,16 +52,16 @@
    dataArray[3] = "unset"; //unset / mobile / desktop
    imgDatabase.push( dataArray );
    }

    //VARIABLES
    var windowWidth;
    ImageRespond();

    //FUNCTIONS
    function Check_Window_Size(){
    return window.innerWidth;
    }

    //SWITCH BETWEEN IMAGE SOURCES
    function ImageRespond(){
    windowWidth = Check_Window_Size();
    @@ -64,15 +79,15 @@
    }
    }
    }

    if (imageList.length > 0){
    //WINDOW RESIZE EVENT LISTENER
    var resizeCheckPause = false;
    window.addEventListener("resize", function(){
    if (!resizeCheckPause){

    ImageRespond();

    resizeCheckPause = true;
    window.requestAnimationFrame(function(){
    resizeCheckPause = false;
  3. Polyducks revised this gist Dec 5, 2016. 1 changed file with 29 additions and 13 deletions.
    42 changes: 29 additions & 13 deletions responsive-images.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,21 @@

    <script>

    //on resize
    /*
    RESPONSIVE-IMAGES
    ._______________________. .________.
    || || /| |\ | |
    || || / '----' \ | |
    || || / \ | |
    || DESKTOP || \ / | MOBILE |
    || || \ ,----, / | |
    || || \| |/ | |
    ;L____________________(); ;___()___;
    */

    (function(){

    //SETTINGS
    @@ -51,19 +65,21 @@
    }
    }

    //WINDOW RESIZE EVENT LISTENER
    var resizeCheckPause = false;
    window.addEventListener("resize", function(){
    if (!resizeCheckPause){

    ImageRespond();
    if (imageList.length > 0){
    //WINDOW RESIZE EVENT LISTENER
    var resizeCheckPause = false;
    window.addEventListener("resize", function(){
    if (!resizeCheckPause){

    resizeCheckPause = true;
    window.requestAnimationFrame(function(){
    resizeCheckPause = false;
    });
    }
    });
    ImageRespond();

    resizeCheckPause = true;
    window.requestAnimationFrame(function(){
    resizeCheckPause = false;
    });
    }
    });
    }
    })();


  4. Polyducks created this gist Dec 5, 2016.
    70 changes: 70 additions & 0 deletions responsive-images.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,70 @@
    <img data-mob-src="mobile.png" data-desk-src="desktop.png" data-threshold="900" />
    <img data-mob-src="mobile.png" data-desk-src="desktop.png" />

    <script>

    //on resize
    (function(){

    //SETTINGS
    var defaultThreshold = 750;

    //ELEMENTS
    //all img tags with data-mob-src
    var imageList = Array.prototype.slice.call( document.querySelectorAll("img[data-mob-src]") );
    //makes searching easier
    var imgDatabase = [];
    for ( var i = 0; i < imageList.length; i++ ){
    var dataArray = [];
    dataArray[0] = imageList[i].getAttribute("data-threshold") || defaultThreshold;
    dataArray[0] = parseInt(dataArray[0]);
    dataArray[1] = imageList[i].getAttribute("data-mob-src");
    dataArray[2] = imageList[i].getAttribute("data-desk-src");
    dataArray[3] = "unset"; //unset / mobile / desktop
    imgDatabase.push( dataArray );
    }

    //VARIABLES
    var windowWidth;
    ImageRespond();

    //FUNCTIONS
    function Check_Window_Size(){
    return window.innerWidth;
    }

    //SWITCH BETWEEN IMAGE SOURCES
    function ImageRespond(){
    windowWidth = Check_Window_Size();
    for ( var i = 0; i < imgDatabase.length; i++ ){
    if ( imgDatabase[i][0] >= windowWidth ){
    if ( imgDatabase[i][3] !== "mobile" ){
    imageList[i].src = imgDatabase[i][1]; //set to mobile
    imgDatabase[i][3] = "mobile";
    }
    }else{
    if ( imgDatabase[i][3] !== "desktop" ){
    imageList[i].src = imgDatabase[i][2]; //set to desktop
    imgDatabase[i][3] = "desktop";
    }
    }
    }
    }

    //WINDOW RESIZE EVENT LISTENER
    var resizeCheckPause = false;
    window.addEventListener("resize", function(){
    if (!resizeCheckPause){

    ImageRespond();

    resizeCheckPause = true;
    window.requestAnimationFrame(function(){
    resizeCheckPause = false;
    });
    }
    });
    })();


    </script>