Integralist

The BBC has a server-side image service which provides developers with multiple sized versions of any image they request. It works in a similar fashion to http://placehold.it/ but it also handles the image ratios returned (where as placehold.it doesn't).

The original BBC News process (and my re-working of the script) follows roughly these steps...

• Create new instance of ImageEnhancer
• Change any divs within the page (which have a class of delayed-image-load) into a transparent GIF using a Base64 encoded string.
  • We set the width & height HTML attributes of the image to the required size
  • We know what size the image needs to be because each div has custom data-attr set server-side to the size of the image
  • We then set a class of image-replace onto each newly created transparent image
• We use a 250ms setTimeout to unblock the UI thread and which calls a function resizeImages which enhances the image-replace images so their source is now set to a URL whe

zenorocha

(function() {
    
    var script,
        scripts = document.getElementsByTagName('script')[0];
        
    function load(url) {
      script = document.createElement('script');
      script.async = true;
      script.src = url;
      scripts.parentNode.insertBefore(script, scripts);

pfulton

// jQuery fix for Webkit SVG height bug.
// Documented here: https://bugs.webkit.org/show_bug.cgi?id=82489 & http://www.brichards.co.uk/blog/webkit-svg-height-bug-workaround
// Found via: http://stackoverflow.com/questions/7570917/svg-height-incorrectly-calculated-in-webkit-browsers


function fixWebkitHeightBug(){
  var svgW = 658;
  var svgH = 500;
  var curSVGW = $('#svg-container').width();
  var newSVGH = heightInRatio(svgH,svgW,curSVGW);

jonjaques

// You create your bookmarklet by instantiating
// a new Bookmarklet function, then pass in the options like so.
// This example checks to see if the var is already defined, and makes
// sure not to overwrite it. This could happen if the user clicks on
// the bookmarklet more than once.

MyBookmarklet = MyBookmarklet || (MyBookmarklet = new Bookmarklet({
  // debug: true, // use debug to bust the cache on your resources
  css: ['/my/style.css'],
  js: [],

paulirish

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel

// MIT license

(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];