Skip to content

Commit 1053d88

Browse files
committed
1 parent 7e3ff43 commit 1053d88

File tree

4 files changed

+31
-35
lines changed

4 files changed

+31
-35
lines changed

README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@ new dll('selector',callback);
1919
```
2020

2121
# What it does
22-
*
22+
* Integrates nicelly into your projects and provides build tools
2323
* Do lazy loading for an element that is subject to lazy load via `data-src`, or
2424
* Do to all child items of a given element
2525
* Do <code>backgroundImage</code> to elements other than <code>&lt;img&gt;</code> if they have <code>data-src</code> attribute.
2626
* Do callback when load event is triggered for one element, or for the last child element of a given parent.
27-
* Do lazy loading for video elements having `<source>` with `data-src` attribute
27+
* Do lazy loading for `<video>` elements having `<source>` with `data-src` attribute
2828
* Do lazy load for all items having <code>data-src</code> attribute.
2929

3030
# Works with

assets/js/scripts.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ makeSRC(fill,'3840/2160');
2323
var testCols1 = document.getElementsByClassName('testCol1')[0],
2424
itms1 = testCols1.getElementsByTagName('IMG');
2525

26-
makeSRC(testCols1,avgSize);
2726
for ( var i=0, itl=itms1.length; i<itl; i++ ){
2827
makeSRC(itms1[i],sizeSmall);
2928
}

dist/dll.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/dll.js

Lines changed: 27 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,9 @@ export default function DLL (element,callbackFn){
1212

1313
// callback
1414
callbackFn = typeof callbackFn === 'function' ? callbackFn : null; // callback function
15-
16-
// bind
17-
let self = this,
1815

19-
// element's src attribute
20-
elementSRC = element && element.getAttribute('data-src') || null, //element has own data-src attribute
16+
// element's src attribute
17+
let elementSRC = element && element.getAttribute('data-src') || null, //element has own data-src attribute
2118

2219
// private method
2320
getElements = function() { // we get images of a given object or itself
@@ -36,32 +33,32 @@ export default function DLL (element,callbackFn){
3633
Array.from(queue).map(x=>mediaItems.push(x))
3734

3835
return mediaItems;
39-
};
36+
},
4037

41-
// public methods
42-
self.load = function(mediaElement, imageCallback) {
43-
var isVideo = mediaElement.tagName === 'SOURCE',
44-
loadMethod = isVideo ? 'onloadstart' : 'onload',
45-
loadEvent = isVideo ? 'loadstart' : 'load',
46-
newVideo = isVideo ? document.createElement('VIDEO') : 0,
47-
mediaObject = isVideo ? document.createElement('SOURCE') : new Image(),
48-
loadTarget = isVideo ? newVideo : mediaObject,
49-
src = mediaElement.getAttribute('data-src');
38+
// public methods
39+
load = function(mediaElement, imageCallback) {
40+
var isVideo = mediaElement.tagName === 'SOURCE',
41+
loadMethod = isVideo ? 'onloadstart' : 'onload',
42+
loadEvent = isVideo ? 'loadstart' : 'load',
43+
newVideo = isVideo ? document.createElement('VIDEO') : 0,
44+
mediaObject = isVideo ? document.createElement('SOURCE') : new Image(),
45+
loadTarget = isVideo ? newVideo : mediaObject,
46+
src = mediaElement.getAttribute('data-src');
5047

51-
one(loadTarget,loadEvent,()=>{
52-
if (mediaElement.tagName === 'IMG') { mediaElement.src=src; } // 'IMG'
53-
else if (mediaElement.tagName === 'SOURCE') { // 'VIDEO' 'SOURCE'
54-
mediaElement.src=src;
55-
mediaElement.parentNode.load();
56-
}
57-
else {mediaElement.style.backgroundImage = 'url("'+src+'")'; } // background-image
58-
mediaElement.removeAttribute('data-src');
59-
imageCallback && imageCallback();
60-
})
61-
mediaObject.src = src;
62-
newVideo && ( newVideo.appendChild(mediaObject) );
48+
one(loadTarget,loadEvent,()=>{
49+
if (mediaElement.tagName === 'IMG') { mediaElement.src=src; } // 'IMG'
50+
else if (mediaElement.tagName === 'SOURCE') { // 'VIDEO' 'SOURCE'
51+
mediaElement.src=src;
52+
mediaElement.parentNode.load();
53+
}
54+
else {mediaElement.style.backgroundImage = 'url("'+src+'")'; } // background-image
55+
mediaElement.removeAttribute('data-src');
56+
imageCallback && imageCallback();
57+
})
58+
mediaObject.src = src;
59+
newVideo && ( newVideo.appendChild(mediaObject) );
6360

64-
}
61+
}
6562

6663
// init
6764
tryWrapper(()=>{
@@ -70,9 +67,9 @@ export default function DLL (element,callbackFn){
7067

7168
mediaTargets.map((x,i)=>{
7269
if ( i === mediaTargets.length-1 && callbackFn) {
73-
self.load(x,callbackFn);
70+
load(x,callbackFn);
7471
} else {
75-
self.load(x)
72+
load(x)
7673
}
7774
})
7875
}

0 commit comments

Comments
 (0)