Skip to content

Commit 0598c4e

Browse files
allanesquinaallanesquina
committed
lazy load img
1 parent 6a91ff0 commit 0598c4e

File tree

22 files changed

+560
-217
lines changed

22 files changed

+560
-217
lines changed

‎Gruntfile.js

+4
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,17 @@ module.exports = function(grunt){
2727
dev: {
2828
files: {
2929
'.tmp/public/assets/js/core.min.js': [
30+
'public/assets/js/vendor/jquery.scrollstop.js',
31+
'public/assets/js/vendor/jquery.lazyload.js',
3032
'public/assets/js/core.js'
3133
]
3234
}
3335
},
3436
dist: {
3537
files: {
3638
'dist/public/assets/js/core.min.js': [
39+
'public/assets/js/vendor/jquery.scrollstop.js',
40+
'public/assets/js/vendor/jquery.lazyload.js',
3741
'public/assets/js/core.js'
3842
]
3943
}

‎i18n/de-de/de-de.json

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"title":"JS: Der richtige Weg",
44
"description":"Eine kurze Übersicht an Best-Practices für das Programmieren mit JavaScript -- Links zu Entwurfsmustern und Tutorials aus dem Web"
55
},
6+
"direction": "ltr",
67
"welcome": "{{@link=partials/welcome.html}}",
78
"menu": {
89
"title": "Wähle deinen Weg",

‎i18n/en-us/en-us.json

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"title":"JS: The Right Way",
44
"description":"A quick reference to best practices for writing JavaScript -- links to code patterns and tutorials from around the web"
55
},
6+
"direction": "ltr",
67
"welcome": "{{@link=partials/welcome.html}}",
78
"menu": {
89
"title": "Choose your path",

‎i18n/es-es/es-es.json

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"title":"JS: La forma correcta",
44
"description":"Una referencia a las mejores prácticas para escribir código JavaScript -- enlaces de patrones de código y tutoriales alrededor de la web"
55
},
6+
"direction": "ltr",
67
"welcome": "{{@link=partials/welcome.html}}",
78
"menu": {
89
"title": "Elije tu camino",

‎i18n/fa-ir/fa-ir.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"title":"جاوااسکریپت: از راه درستش",
44
"description":"یک مرجع سریع به بهترین شیوه برای برنامه‌نویسی جاوااسکریپت -- پیوند به الگوها و آموزش‌های سراسر وب"
55
},
6+
"direction": "rtl",
67
"welcome": "{{@link=partials/welcome.html}}",
78
"menu": {
89
"title": "مسیر خود را انتخاب کنید",
@@ -913,6 +914,5 @@
913914
{"url":"zh-tw","name":"繁體中文"},
914915
{"url":"zh-cn","name":"简体中文"},
915916
{"url":"fa-ir","name":"فارسی"}
916-
],
917-
"direction": "rtl"
917+
]
918918
}

‎i18n/ko-kr/ko-kr.json

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"title":"JS: The Right Way",
44
"description":"JavaScript를 작성할 때 있어서 최고의 방법들에 대한 간편한 참고문헌입니다. 웹에 있는 코드 패턴들과 튜토리얼들의 링크를 포함하고 있습니다."
55
},
6+
"direction": "ltr",
67
"welcome": "{{@link=partials/welcome.html}}",
78
"menu": {
89
"title": "어디부터 보시겠습니까?",

‎i18n/pt-br/pt-br.json

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"title":"JS: A forma certa",
44
"description":"Uma referência rápida para as melhores práticas de como escrever JavaScript -- links para padrões de código e tutoriais de toda a web"
55
},
6+
"direction": "ltr",
67
"welcome": "{{@link=partials/welcome.html}}",
78
"menu": {
89
"title": "Escolha seu caminho",

‎i18n/zh-cn/zh-cn.json

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"title":"JS: The Right Way",
44
"description":"学习 JavaScript 的最佳快速指南 -- 来自网上的代码风格和教程链接"
55
},
6+
"direction": "ltr",
67
"welcome": "{{@link=partials/welcome.html}}",
78
"menu": {
89
"title": "选择你想看的主题",

‎i18n/zh-tw/zh-tw.json

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"title":"JS: The Right Way",
44
"description":"練習撰寫 JavaScript 的最佳快速指南 -- 來自網路上的程式碼風格及教學連結"
55
},
6+
"direction": "ltr",
67
"welcome": "{{@link=partials/welcome.html}}",
78
"menu": {
89
"title": "選擇你想看的主題",

‎public/assets/js/core.js

+73-55
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,111 @@
1-
var App = (function( window, document, $ ) {
1+
var App = (function (window, document, $) {
22

33
'use strict';
44

55
var users = [
6-
'BrendanEich',
7-
'isaacs',
8-
'rdworth',
9-
'fat',
10-
'michalbe',
11-
'afabbro',
12-
'addyosmani',
13-
'joezimjs',
14-
'douglascrockford',
15-
'paulirish',
16-
'tj',
17-
'guille',
18-
'nzakas',
19-
'jeresig',
20-
'substack',
21-
'dherman',
22-
'creationix',
23-
'mrdoob',
24-
'codepo8',
25-
'rwaldron',
26-
'darkwing',
27-
'bevacqua',
28-
'sindresorhus',
29-
'getify',
30-
'ericelliott',
31-
'aaronfrost',
32-
'jhusain',
33-
'ryanflorence',
34-
'gaearon',
35-
'rauschma'
36-
],
37-
userIsDone,
38-
URL = 'https://api.github.com/';
6+
'BrendanEich',
7+
'isaacs',
8+
'rdworth',
9+
'fat',
10+
'michalbe',
11+
'afabbro',
12+
'addyosmani',
13+
'joezimjs',
14+
'douglascrockford',
15+
'paulirish',
16+
'tj',
17+
'guille',
18+
'nzakas',
19+
'jeresig',
20+
'substack',
21+
'dherman',
22+
'creationix',
23+
'mrdoob',
24+
'codepo8',
25+
'rwaldron',
26+
'darkwing',
27+
'bevacqua',
28+
'sindresorhus',
29+
'getify',
30+
'ericelliott',
31+
'aaronfrost',
32+
'jhusain',
33+
'ryanflorence',
34+
'gaearon',
35+
'rauschma'
36+
],
37+
userIsDone,
38+
URL = 'https://api.github.com/';
3939

4040
return {
4141
// Init function
42-
init: function() {
42+
init: function () {
4343
this.getGithubUsers();
4444
this.getGithubContrib();
45+
$('img.lazy').lazyload();
4546
},
4647
// Getting and appending users of github
47-
getGithubUsers: function() {
48-
var i=0, length = userIsDone = users.length,
49-
str='';
48+
getGithubUsers: function () {
49+
var i = 0,
50+
length = userIsDone = users.length,
51+
str = '',
52+
$whoto;
5053

5154
// Callback function
52-
function cb( result ) {
53-
userIsDone-=1;
54-
str += '<div class="user"><a href="' + result.html_url + '"><img height="80" width="80" src="' + result.avatar_url + '"><span>' + result.name + '</span></a></div>';
55+
function cb(result) {
56+
userIsDone -= 1;
57+
str += '<div class="user"><a href="' + result.html_url +
58+
'"><img height="80" width="80" class="lazy" data-original="' +
59+
result.avatar_url + '"><span>' + result.name +
60+
'</span></a></div>';
5561
// Checking if all callbacks were called
56-
if( userIsDone === 0 ) {
57-
$('#whotofollow .users').append( str );
62+
if (userIsDone === 0) {
63+
$whoto = $('#whotofollow .users');
64+
$whoto.append(str);
65+
$whoto.find('img.lazy').lazyload();
5866
}
5967
}
6068

6169
// Doing the requests for each user
62-
for( ; i < length; i+=1 ) {
63-
$.get( URL + 'users/' + users[ i ] + '?client_id=5feee647eb6cc3d1f984&client_secret=9ed0c553e278d047a264c3abd26f385144d51ac4', cb );
70+
for (; i < length; i += 1) {
71+
$.get(URL + 'users/' + users[i] +
72+
'?client_id=5feee647eb6cc3d1f984&client_secret=9ed0c553e278d047a264c3abd26f385144d51ac4',
73+
cb);
6474
}
6575
},
6676
// Getting the project's contributors
67-
getGithubContrib: function() {
77+
getGithubContrib: function () {
78+
var $footer;
6879

6980
// Callback function
70-
function cb( result ) {
71-
var i=0,
81+
function cb(result) {
82+
var i = 0,
7283
length = result.length,
73-
str='',
84+
str = '',
7485
obj;
7586

76-
for ( ; i < length; i+=1 ) {
77-
obj = result[ i ];
87+
for (; i < length; i += 1) {
88+
obj = result[i];
7889

79-
str += '<div class="user"><a href="' + obj.html_url + '"><img width="80" height="80" src="' + obj.avatar_url + '"><span>' + obj.login + '</span></a></div>';
90+
str += '<div class="user"><a href="' + obj.html_url +
91+
'"><img width="80" height="80" class="lazy" data-original="' + obj
92+
.avatar_url + '"><span>' + obj.login +
93+
'</span></a></div>';
8094
}
8195

82-
$('#footer .users').append( str );
96+
$footer = $('#footer .users');
97+
$footer.append(str);
98+
$footer.find('img.lazy').lazyload();
8399
}
84100

85101
// Doing the request
86-
$.get( URL + 'repos/braziljs/js-the-right-way/contributors?client_id=5feee647eb6cc3d1f984&client_secret=9ed0c553e278d047a264c3abd26f385144d51ac4', cb )
102+
$.get(URL +
103+
'repos/braziljs/js-the-right-way/contributors?client_id=5feee647eb6cc3d1f984&client_secret=9ed0c553e278d047a264c3abd26f385144d51ac4',
104+
cb)
87105
}
88106
}
89107

90-
}( window, document, jQuery ));
108+
}(window, document, jQuery));
91109

92110
// Starting the Application
93111
App.init();

0 commit comments

Comments
 (0)