1
\$\begingroup\$

I just made this responsive image solution, but I'm not sure if it's the best way to do what I'm trying to achieve. Use cases can be found at http://responsimage.com/.

/* responsimage.com v0.2.3 */
(function ($, window, Date) {

    'use strict';

    $(function() {

        var rPrefs = $('meta[name="responsimage"]'),
            rServer = rPrefs.data('server'),
            rStatic = rPrefs.data('static') || 'http://f.cl.ly/items/0M3H0q3n1Z1S1y362d09/spacer.gif',
            rLoading = rPrefs.data('loading') || 'http://f.cl.ly/items/2w2G3N2p0B400Z380J1u/loading.gif',
            rLimit = rPrefs.data('limit') || 100,
            rTimestamp = new Date(),
            rTags = $('[data-responsimage]');

        function responsimage(rInit) {
            rTags.each(function() {
                var rThis = $(this),
                    filename = rThis.data('responsimage'),
                    rWidth = rThis.width(),
                    rHeight = rThis.height(),
                    rAnchor = rThis.data('responsimage-anchor') || 5,
                    rImage;

                if(rInit) {
                    rThis.attr('src', rStatic).css('background', '#fff url(' + rLoading + ') no-repeat center');
                }

                if(rThis.css('font-family') === 'pixel-ratio-2') {
                    rWidth *= 2;
                    rHeight *= 2;
                }

                rImage = rServer.replace('width', rWidth).replace('height', rHeight).replace('anchor', rAnchor).replace('filename', filename);

                if(filename !== 'disabled') {
                    rThis.attr('src', rImage);
                }
            });
        }

        responsimage(1);

        $(window).resize(function () {
            var rNow = new Date();

            if (rNow - rTimestamp >= rLimit) {
                responsimage(false);
            }
        });

        window.onorientationchange = function() {      
            setTimeout(responsimage, 0); 
        };
    });
}(jQuery, window, Date));
\$\endgroup\$
6
  • 4
    \$\begingroup\$ please put code in question \$\endgroup\$ – Raynos May 2 '12 at 22:23
  • 4
    \$\begingroup\$ Do you start all your variables with r for the lulz? \$\endgroup\$ – Raynos May 2 '12 at 22:24
  • 1
    \$\begingroup\$ jQuery dependency = not efficient. \$\endgroup\$ – Raynos May 2 '12 at 22:24
  • \$\begingroup\$ I started with r so I would ensure no conflicts \$\endgroup\$ – Kirk Strobeck May 3 '12 at 22:26
  • \$\begingroup\$ So you do start all your variables with r for the lulz. Good stuff o/ \$\endgroup\$ – Raynos May 3 '12 at 22:36
2
\$\begingroup\$
  1. declare the variables inside "rTags.each()" on the outside. This way there not being declared on each iteration.

  2. The naming of parameters "window" and "Date". I would suggest naming them something different to avoid confusion. This way you can distinguish between the globals from the parameters.

  3. Since you variables are scoped in the functions you can drop the "r" if you wanted too.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.