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, 2012 at 22:23
  • 4
    \$\begingroup\$ Do you start all your variables with r for the lulz? \$\endgroup\$
    – Raynos
    May 2, 2012 at 22:24
  • 1
    \$\begingroup\$ jQuery dependency = not efficient. \$\endgroup\$
    – Raynos
    May 2, 2012 at 22:24
  • \$\begingroup\$ I started with r so I would ensure no conflicts \$\endgroup\$ May 3, 2012 at 22:26
  • \$\begingroup\$ So you do start all your variables with r for the lulz. Good stuff o/ \$\endgroup\$
    – Raynos
    May 3, 2012 at 22:36

1 Answer 1

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.