diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..c346b13 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +bower_components/ +node_modules/ diff --git a/README.md b/README.md new file mode 100644 index 0000000..7f72263 --- /dev/null +++ b/README.md @@ -0,0 +1,69 @@ +# Flickity background lazyload + +Lazyload background images of selected cells. + +## Install + +npm: `npm install flickity-bg-lazyload` + +Bower: `bower install flickity-bg-lazyload` + +## Usage + +Set `data-flickity-bg-lazyload` attribute of the cell to the background image's url. + +``` js +
+
+
+
+
+``` + +Set `bgLazyLoad` option. + +``` +// lazyloads backgroung image of selected cell +// jQuery +var $carousel = $('.carousel').flickity({ + bgLazyLoad: true +}); + +// vanilla JS +var flkty = new Flickity( '.carousel', { + bgLazyLoad: true +}); +``` + +Set `bgLazyLoad` to a number to load images in adjacent cells. + +``` js +lazyLoad: 2 +// load background images in selected cell +// and next 2 cells +// and previous 2 cells +``` + +### RequireJS + +``` js +requirejs( [ 'path/to/flickity-bg-lazyload' ], function( Flickity ) { + var flkty = new Flickity( '.carousel', { + bgLazyLoad: true + }); +}); +``` + +### Browserify + +``` js +var Flickity = require('flickity-flickity-bg-lazyload'); + +var flkty = new Flickity( '.carousel', { + bgLazyLoad: true +}); +``` + +--- + +By [Metafizzy 🌈🐻](http://metafizzy.co) diff --git a/bg-lazyload.js b/bg-lazyload.js new file mode 100644 index 0000000..2062d41 --- /dev/null +++ b/bg-lazyload.js @@ -0,0 +1,119 @@ +/** + * Flickity background lazyload v1.0.0 + * lazyload background cell images + */ + +/*jshint browser: true, unused: true, undef: true */ + +( function( window, factory ) { + // universal module definition + /*globals define, module, require */ + if ( typeof define == 'function' && define.amd ) { + // AMD + define( [ + 'flickity/js/index', + 'fizzy-ui-utils/utils' + ], factory ); + } else if ( typeof module == 'object' && module.exports ) { + // CommonJS + module.exports = factory( + require('flickity'), + require('fizzy-ui-utils') + ); + } else { + // browser global + factory( + window.Flickity, + window.fizzyUIUtils + ); + } + +}( window, function factory( Flickity, utils ) { +/*jshint strict: true */ +'use strict'; + +Flickity.createMethods.push('_createBgLazyLoad'); + +var proto = Flickity.prototype; + +proto._createBgLazyLoad = function() { + this.on( 'select', this.bgLazyLoad ); +}; + +proto.bgLazyLoad = function() { + var lazyLoad = this.options.bgLazyLoad; + if ( !lazyLoad ) { + return; + } + + // get adjacent cells, use lazyLoad option for adjacent count + var adjCount = typeof lazyLoad == 'number' ? lazyLoad : 0; + var cellElems = this.getAdjacentCellElements( adjCount ); + + for ( var i=0; i < cellElems.length; i++ ) { + var cellElem = cellElems[i]; + this.bgLazyLoadElem( cellElem ); + // select lazy elems in cell + var children = cellElem.querySelectorAll('[data-flickity-bg-lazyload]'); + for ( var j=0; j < children.length; j++ ) { + this.bgLazyLoadElem( children[j] ); + } + } +}; + +proto.bgLazyLoadElem = function( elem ) { + var attr = elem.getAttribute('data-flickity-bg-lazyload'); + if ( attr ) { + new BgLazyLoader( elem, attr, this ); + } +}; + +// -------------------------- LazyBGLoader -------------------------- // + +/** + * class to handle loading images + */ +function BgLazyLoader( elem, url, flickity ) { + this.element = elem; + this.url = url; + this.img = new Image(); + this.flickity = flickity; + this.load(); +} + +BgLazyLoader.prototype.handleEvent = utils.handleEvent; + +BgLazyLoader.prototype.load = function() { + this.img.addEventListener( 'load', this ); + this.img.addEventListener( 'error', this ); + // load image + this.img.src = this.url; + // remove attr + this.element.removeAttribute('data-flickity-bg-lazyload'); +}; + +BgLazyLoader.prototype.onload = function( event ) { + this.element.style.backgroundImage = 'url(' + this.url + ')'; + this.complete( event, 'flickity-bg-lazyloaded' ); +}; + +BgLazyLoader.prototype.onerror = function( event ) { + this.complete( event, 'flickity-bg-lazyerror' ); +}; + +BgLazyLoader.prototype.complete = function( event, className ) { + // unbind events + this.img.removeEventListener( 'load', this ); + this.img.removeEventListener( 'error', this ); + + this.element.classList.add( className ); + this.flickity.dispatchEvent( 'bgLazyLoad', event, this.element ); +}; + +// ----- ----- // + +Flickity.BgLazyLoader = BgLazyLoader; + +return Flickity; + +})); diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..5def691 --- /dev/null +++ b/bower.json @@ -0,0 +1,32 @@ +{ + "name": "flickity-bg-lazyload", + "authors": [ + "David DeSandro" + ], + "description": "Flickity lazyload background images", + "main": "bg-lazyload.js", + "dependencies": { + "flickity": "v2", + "fizzy-ui-utils": "^2.0.2" + }, + "devDependencies": { + "qunit": "^2.0.0" + }, + "keywords": [ + "flickity", + "background", + "lazyload", + "image" + ], + "license": "MIT", + "homepage": "https://github.com/metafizzy/flickity-bg-lazyload", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests", + "sandbox", + "package.json" + ] +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..5d3ac7b --- /dev/null +++ b/package.json @@ -0,0 +1,35 @@ +{ + "name": "flickity-bg-lazyload", + "version": "1.0.0", + "description": "Flickity lazyload background images", + "main": "bg-lazyload.js", + "dependencies": { + "flickity": "v2", + "fizzy-ui-utils": "^2.0.2" + }, + "devDependencies": { + "qunit": "^2.0.0" + }, + "directories": { + "test": "test" + }, + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/metafizzy/flickity-bg-lazyload.git" + }, + "keywords": [ + "flickity", + "lazyload", + "background", + "image" + ], + "author": "David DeSandro", + "license": "MIT", + "bugs": { + "url": "https://github.com/metafizzy/flickity-bg-lazyload/issues" + }, + "homepage": "https://github.com/metafizzy/flickity-bg-lazyload#readme" +} diff --git a/test/index.html b/test/index.html new file mode 100644 index 0000000..b9eb322 --- /dev/null +++ b/test/index.html @@ -0,0 +1,83 @@ + + + + + + + Flickity bg lazyLoad + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +

bgLazyLoad

+
+
+
+
+
+
+
+
+
+
+
+ + + diff --git a/test/test-bg-lazyload.js b/test/test-bg-lazyload.js new file mode 100644 index 0000000..dc57106 --- /dev/null +++ b/test/test-bg-lazyload.js @@ -0,0 +1,31 @@ +/*jshint browser: true, undef: true, strict: true, unused: true */ +/*globals QUnit, Flickity */ +QUnit.test( 'bgLazyLoad', function( assert ) { + 'use strict'; + + var done = assert.async(); + + var carousel = document.querySelector('.carousel--bg-lazyload') + var flkty = new Flickity( carousel, { + bgLazyLoad: 1 + }); + + var loadCount = 0; + flkty.on( 'bgLazyLoad', function( event, elem ) { + loadCount++; + + assert.equal( event.type, 'load', 'event.type == load' ); + assert.ok( elem, 'elem argument there' ); + + // after first 2 have loaded, select 7th cell + if ( loadCount == 2 ) { + flkty.select( 6 ); + } + if ( loadCount == 5 ) { + var loadedImgs = carousel.querySelectorAll('.flickity-bg-lazyloaded'); + assert.equal( loadedImgs.length, '5', 'only 5 images loaded' ); + done(); + } + }); + +});