Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add background support on DIV and A elements. #74

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
+131 −24
Open

feat: add background support on DIV and A elements. #74

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a7cd6da
feat: add background support on DIV and A elements.
euskadi31 Mar 14, 2016
bc13fbc
chore: add getAttribute for all html elements
euskadi31 Mar 15, 2016
3a08967
chore: build lazyload
euskadi31 Mar 15, 2016
64e8870
chore: add kokoroe website
euskadi31 Mar 15, 2016
3d2134b
feat: add example for background feature
euskadi31 Mar 15, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,7 @@ Tens of millions of pageviews are served each month using this project:
* [mapado.com](https://www.mapado.com/)
* [decitre.fr](https://www.decitre.fr/)
* [base-orb.fr](https://www.base-orb.fr/)
* [kokoroe.co](https://www.kokoroe.co/fr/)

.. And many unlisted websites, [add yours](https://github.com/vvo/lazyload/edit/master/README.md)!

Expand Down
31 changes: 23 additions & 8 deletions build/lazyload.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,13 @@
module.exports = lazyload;

var inViewport = require('in-viewport');
var lazyAttrs = ['data-src'];
var lazyAttrs = ['data-src', 'data-background-src'];

global.lzld = lazyload();

// Provide libs using getAttribute early to get the good src
// and not the fake data-src
replaceGetAttribute('Image');
replaceGetAttribute('IFrame');
replaceGetAttribute();

function registerLazyAttr(attr) {
if (indexOf.call(lazyAttrs, attr) === -1) {
Expand All @@ -32,16 +31,32 @@ function lazyload(opts) {
var elts = [];

function show(elt) {
var src = findRealSrc(elt);
if (elt.hasAttribute('data-background-src')) {
var src = findRealBackgroundSrc(elt);

if (src) {
elt.src = src;
if (src) {
elt.style.backgroundImage = 'url(' + src + ')';
}
} else {
var src = findRealSrc(elt);

if (src) {
elt.src = src;
}
}

elt.setAttribute('data-lzled', true);
elts[indexOf.call(elts, elt)] = null;
}

function findRealBackgroundSrc(elt) {
if (typeof opts.src === 'function') {
return opts.src(elt);
}

return elt.getAttribute(opts.src == 'data-src' ? 'data-background-src': opts.src);
}

function findRealSrc(elt) {
if (typeof opts.src === 'function') {
return opts.src(elt);
Expand All @@ -68,8 +83,8 @@ function lazyload(opts) {
return register;
}

function replaceGetAttribute(elementName) {
var fullname = 'HTML' + elementName + 'Element';
function replaceGetAttribute() {
var fullname = 'HTMLElement';
if (fullname in global === false) {
return;
}
Expand Down
17 changes: 9 additions & 8 deletions build/lazyload.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

31 changes: 31 additions & 0 deletions examples/background.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!doctype html>
<title>lazyloading images</title>
<script src="../build/lazyload.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(event) {
var nodeList = document.querySelectorAll('.lazyload');
var nodes = Array.prototype.slice.call(nodeList, 0);

nodes.forEach(lzld);
});
</script>

<style type="text/css">
.lazyload {
background-image: url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==);
}
</style>

<h1>background images example</h1>
<h2>scroll for more</h2>

<div style="margin-top:2000px"></div>

<div class="lazyload" style="width:599px; height:449px;" data-background-src="img/01.jpg"></div>

<div class="lazyload" style="width:408px; height:580px;" data-background-src="img/02.jpg"></div>

<div class="lazyload" style="width:486px; height:604px;" data-background-src="img/03.jpg"></div>

<div class="lazyload" style="width:598px; height:391px;" data-background-src="img/04.jpg"></div>

31 changes: 23 additions & 8 deletions lazyload.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
module.exports = lazyload;

var inViewport = require('in-viewport');
var lazyAttrs = ['data-src'];
var lazyAttrs = ['data-src', 'data-background-src'];

global.lzld = lazyload();

// Provide libs using getAttribute early to get the good src
// and not the fake data-src
replaceGetAttribute('Image');
replaceGetAttribute('IFrame');
replaceGetAttribute();

function registerLazyAttr(attr) {
if (indexOf.call(lazyAttrs, attr) === -1) {
Expand All @@ -30,16 +29,32 @@ function lazyload(opts) {
var elts = [];

function show(elt) {
var src = findRealSrc(elt);
if (elt.hasAttribute('data-background-src')) {
var src = findRealBackgroundSrc(elt);

if (src) {
elt.src = src;
if (src) {
elt.style.backgroundImage = 'url(' + src + ')';
}
} else {
var src = findRealSrc(elt);

if (src) {
elt.src = src;
}
}

elt.setAttribute('data-lzled', true);
elts[indexOf.call(elts, elt)] = null;
}

function findRealBackgroundSrc(elt) {
if (typeof opts.src === 'function') {
return opts.src(elt);
}

return elt.getAttribute(opts.src == 'data-src' ? 'data-background-src': opts.src);
}

function findRealSrc(elt) {
if (typeof opts.src === 'function') {
return opts.src(elt);
Expand All @@ -66,8 +81,8 @@ function lazyload(opts) {
return register;
}

function replaceGetAttribute(elementName) {
var fullname = 'HTML' + elementName + 'Element';
function replaceGetAttribute() {
var fullname = 'HTMLElement';
if (fullname in global === false) {
return;
}
Expand Down
44 changes: 44 additions & 0 deletions test/background.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
describe('a simple usage with an image background', function() {
require('./fixtures/bootstrap.js');
beforeEach(h.clean);
afterEach(h.clean);

// not using a dataURI for IE
var fakeSrc = '../b.gif?'+(+new Date());
var realSrc = '/test/fixtures/tiny.gif?'+(+new Date());

var test;

beforeEach(function() {
test = h.createTest({
tagName: 'div',
attributes: {
id: 'simple_background',
style: 'background-image: url(' + fakeSrc + ')',
'data-background-src': realSrc,
width: 10,
height: 10
}
});
lzld(test);
h.insertTest(test);
});

it('background src currently fake', function() {
assert(test.style.backgroundImage.indexOf('b.gif') !== -1);
});

it('getAttribute still gives real src', function() {
assert.equal(realSrc, test.getAttribute('src'));
});

describe('after some scrolling', function() {
beforeEach(h.scroller(0, 50));
beforeEach(h.wait(50));
beforeEach(h.scroller(0, 0));
beforeEach(h.wait(50));

it('loads the image when visible for a while', h.eltLoaded('simple_background'));
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess here what you need to check in the test is that the style property was updated with the good background. Can you do that?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yep ;)

});

});