Permalink
Browse files

split srcset addon into srcset and picture

  • Loading branch information...
1 parent a1e6392 commit 675e709b0575f181f5a019257e975dd65a8f1a30 @dryabov dryabov committed Dec 24, 2013
Showing with 86 additions and 36 deletions.
  1. +8 −0 Gruntfile.js
  2. +64 −0 src/jquery.lazyloadxt.picture.js
  3. +13 −36 src/jquery.lazyloadxt.srcset.js
  4. +1 −0 test/lazyloadxt-addons.html
View
@@ -51,6 +51,10 @@ module.exports = function (grunt) {
src: ['src/jquery.<%= pkg.name %>.bg.js'],
dest: 'dist/jquery.<%= pkg.name %>.bg.js'
},
+ picture: {
+ src: ['src/jquery.<%= pkg.name %>.picture.js'],
+ dest: 'dist/jquery.<%= pkg.name %>.picture.js'
+ },
print: {
src: ['src/jquery.<%= pkg.name %>.print.js'],
dest: 'dist/jquery.<%= pkg.name %>.print.js'
@@ -99,6 +103,10 @@ module.exports = function (grunt) {
src: '<%= concat.bg.dest %>',
dest: 'dist/jquery.<%= pkg.name %>.bg.min.js'
},
+ picture: {
+ src: '<%= concat.picture.dest %>',
+ dest: 'dist/jquery.<%= pkg.name %>.picture.min.js'
+ },
print: {
src: '<%= concat.print.dest %>',
dest: 'dist/jquery.<%= pkg.name %>.print.min.js'
@@ -0,0 +1,64 @@
+/*jslint browser:true, plusplus:true, vars:true, regexp:false */
+/*jshint browser:true, jquery:true */
+
+(function ($, window, document) {
+ 'use strict';
+
+ var options = $.lazyLoadXT,
+ matchMedia = window.matchMedia;
+
+ options.selector += ',picture';
+
+ $(document)
+ // remove default behaviour for inner <img> tag
+ .on('lazyinit', 'img', function (e, $el) {
+ if ($el.parent('picture').length) {
+ $el.lazyLoadXT.srcAttr = '';
+ }
+ })
+ // prepare <picture> polyfill
+ .on('lazyinit', 'picture', function (e, $el) {
+ if (!$el[0].firstChild) {
+ return;
+ }
+
+ var $img = $el.children('img');
+ if (!$img.length) {
+ $img = $('<img>').appendTo($el);
+ }
+
+ $img
+ .attr('width', $el.attr('width'))
+ .attr('height', $el.attr('height'));
+ })
+ // show picture
+ .on('lazyshow', 'picture', function (e, $el) {
+ if (!$el[0].firstChild) {
+ return;
+ }
+
+ var srcAttr = $el.lazyLoadXT.srcAttr,
+ isFuncSrcAttr = $.isFunction(srcAttr),
+ $img = $el.children('img'),
+ src = isFuncSrcAttr ? srcAttr($img) : $img.attr(srcAttr);
+
+ if (src) {
+ $img.attr('src', src);
+ }
+
+ if (matchMedia) {
+ $el
+ .children('br')
+ .each(function () {
+ var $child = $(this),
+ src = isFuncSrcAttr ? srcAttr($child) : $child.attr(srcAttr),
+ media = $child.attr('media');
+
+ if (src && (!media || matchMedia(media).matches)) {
+ $img.attr('src', src);
+ }
+ });
+ }
+ });
+
+})(window.jQuery || window.Zepto, window, document);
@@ -13,13 +13,18 @@
reHeight = /\S\s+(\d+)h/,
reDpr = /\S\s+([\d\.]+)x/,
infty = [0, Infinity],
- one = [0, 1];
-
- options.selector += ',picture';
- options.srcsetAttr = 'data-srcset';
- options.srcsetExtended = true;
- options.srcsetBaseAttr = 'data-srcset-base';
- options.srcsetExtAttr = 'data-srcset-ext';
+ one = [0, 1],
+ srcsetOptions = {
+ srcsetAttr: 'data-srcset',
+ srcsetExtended: true,
+ srcsetBaseAttr: 'data-srcset-base',
+ srcsetExtAttr: 'data-srcset-ext'
+ },
+ prop;
+
+ for (prop in srcsetOptions) {
+ options[prop] = options[prop] || srcsetOptions[prop];
+ }
function max(array, property) {
return Math.max.apply(null, $.map(array, function (item) {
@@ -33,12 +38,7 @@
}));
}
- /**
- * Parse and process srcset attribute
- * based on http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content-1.html#processing-the-image-candidates
- * @param {jQuery} $el
- */
- function srcsetPolyfill($el) {
+ $(document).on('lazyshow', 'img', function (e, $el) {
var srcset = $el.attr(options.srcsetAttr);
if (srcset) {
@@ -99,29 +99,6 @@
}
}
}
- }
-
- $(document).on('lazyshow', 'img', function (e, $el) {
- srcsetPolyfill($el);
- });
-
- $(document).on('lazyshow', 'picture', function (e, $el) {
- var srcAttr = $el.lazyLoadXT.srcAttr,
- isFuncSrcAttr = $.isFunction(srcAttr);
-
- $el
- .children()
- .each(function () {
- if (/img|source/i.test(this.tagName)) {
- var $child = $(this),
- src = isFuncSrcAttr ? srcAttr($child) : $child.attr(srcAttr);
- if (src) {
- $child.attr('src', src);
- } else {
- srcsetPolyfill($child);
- }
- }
- });
});
})(window.jQuery || window.Zepto, window, document);
@@ -13,6 +13,7 @@
<script src="../src/jquery.lazyloadxt.video.js"></script>
<script src="../src/jquery.lazyloadxt.bg.js"></script>
+ <script src="../src/jquery.lazyloadxt.picture.js"></script>
<script src="../src/jquery.lazyloadxt.print.js"></script>
<script src="../src/jquery.lazyloadxt.script.js"></script>
<script src="../src/jquery.lazyloadxt.srcset.js"></script>

0 comments on commit 675e709

Please sign in to comment.