/Single stylesheet/js/libs/rwd-images.js

https://github.com/voidbrain/320andup · JavaScript · 126 lines · 91 code · 9 blank · 26 comment · 15 complexity · d8b771b9d1b3b66691db39839b288abb MD5 · raw file

  1. /*!
  2. * Responsive Images
  3. * Mobile-First images that scale responsively and responsibly
  4. * Copyright 2010, Scott Jehl, Filament Group, Inc
  5. * Dual licensed under the MIT or GPL Version 2 licenses.
  6. * Check out the README.md file for instructions and optimizations
  7. */
  8. (function(win){
  9. //defaults / mixins
  10. var rwdi = (function(){
  11. var defaults = {
  12. clientSideOnly: false,
  13. widthBreakPoint: 480
  14. };
  15. //mixins from rwd_images global
  16. if( 'rwd_images' in win ){
  17. for (var setting in win.rwd_images) {
  18. defaults[setting] = win.rwd_images[setting];
  19. }
  20. }
  21. return defaults;
  22. })(),
  23. clientSideOnly = rwdi.clientSideOnly,
  24. widthBreakPoint = rwdi.widthBreakPoint,
  25. wideload = win.screen.availWidth > widthBreakPoint,
  26. filePath = location.href,
  27. dirPath = filePath.substring(0, filePath.lastIndexOf('/')) + '/',
  28. doc = win.document,
  29. head = doc.getElementsByTagName('head')[0],
  30. //record width cookie for subsequent loads
  31. recordRes = (function(){
  32. var date = new Date();
  33. date.setTime(date.getTime()+(1/*1 day*/*24*60*60*1000));
  34. doc.cookie = "rwd-resolution=" + screen.availWidth + "; expires=" + date.toGMTString() +"; path=/";
  35. })();
  36. //if wideload is false quit now
  37. if( !wideload ){
  38. return;
  39. }
  40. //find and replace img elements
  41. var findrepsrc = function(){
  42. var imgs = doc.getElementsByTagName('img'),
  43. il = imgs.length;
  44. for(var i = 0; i < il; i++){
  45. var img = imgs[i],
  46. fullsrc = img.getAttribute('data-fullsrc');
  47. if(fullsrc){
  48. img.src = fullsrc;
  49. }
  50. }
  51. },
  52. //base tag support test (returns base tag for use if support test passes)
  53. //originally used in the jQuery Mobile framework, converted to plain JS in the hasjs framework, modified for use here
  54. base = (function(){
  55. var backup,
  56. baseAdded = false,
  57. a = doc.createElement("a"),
  58. supported = false,
  59. base = head.getElementsByTagName("base")[0] || (function(){
  60. baseAdded = true;
  61. return head.insertBefore(doc.createElement("base"), head.firstChild);
  62. })();
  63. backup = !baseAdded && base.href;
  64. //test base support before using
  65. base.href = location.protocol + "//" + "x/";
  66. a.href = "y";
  67. //if dynamic base tag is unsupported (Firefox)
  68. if( a.href.indexOf("x/y") < 0 ){
  69. if(backup){
  70. base.href = backup;
  71. }
  72. else{
  73. head.removeChild(base);
  74. }
  75. base = null;
  76. }
  77. else{
  78. if(clientSideOnly){
  79. //more info up top, use with caution!
  80. base.href = "javascript://";
  81. }
  82. else{
  83. base.href = dirPath + "rwd-router/";
  84. }
  85. }
  86. return base;
  87. })(),
  88. //flag for whether loop has run already
  89. complete = false,
  90. //remove base if present, find/rep image srcs if wide enough (maybe make this happen at domready?)
  91. readyCallback = function(){
  92. if( complete ){ return; }
  93. complete = true;
  94. //making this async seems to ensure images don't double request?
  95. setTimeout(function(){
  96. if( base ) {
  97. //set base back to something real before removing
  98. base.href = dirPath;
  99. head.removeChild(base);
  100. }
  101. findrepsrc();
  102. },0);
  103. };
  104. //DOM-ready or onload handler
  105. //W3C event model
  106. if ( doc.addEventListener ) {
  107. doc.addEventListener( "DOMContentLoaded", readyCallback, false );
  108. //fallback
  109. win.addEventListener( "load", readyCallback, false );
  110. }
  111. // If IE event model is used
  112. else if ( doc.attachEvent ) {
  113. doc.attachEvent("onreadystatechange", readyCallback );
  114. //fallback
  115. win.attachEvent( "onload", readyCallback );
  116. }
  117. })(this);