Skip to content

Instantly share code, notes, and snippets.

@1fabiopereira
Last active January 6, 2017 18:45
Show Gist options
  • Save 1fabiopereira/d63f6567347c972526b2bf091e54f319 to your computer and use it in GitHub Desktop.
Save 1fabiopereira/d63f6567347c972526b2bf091e54f319 to your computer and use it in GitHub Desktop.
Carregamento preguiçoso usando web worker - https://github.com/mattslocum/ng-webworker
(function () {
'use strict';
angular.module('clusbe.diretiva.lazy', [])
.directive('lazy', [
'$http',
'$timeout',
'Webworker',
'CONSTANT_RESOURCES_URL_IMG',
'CONSTANT_BASE_URL',
'$window',
function ($http,
$timeout,
Webworker,
CONSTANT_RESOURCES_URL_IMG,
CONSTANT_BASE_URL,
$window) {
// Função que faz a resolução de um recurso
// params uri
function workerMock(url, data) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
complete(this.response);
} else {
notify(this.status);
}
};
if (data) {
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-type", "application/json");
xmlhttp.send(JSON.stringify(data));
} else {
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
}
// Função que executa o worker de resolução de uma url
// Tarefa executado em paralelo - Multithread
function _exec(worker, url, callback) {
worker.run(url).then(function (response) {
callback(null, response);
}, function (err) {
callback(err, null);
});
}
// Função de link para a renderização da view
var _link = function (scope, element, atrrs) {
var tagName = element.prop('tagName');
tagName === 'IMG' ? element.prop('src', 'img/loading_spinner.svg') : element.css({'background-image': 'url(img/loading_spinner.svg)'});
var WorkerHttpThead = Webworker.create(workerMock, {async: true});
var _callback = function (err, response) {
if (err) element.prop('src', 'img/reload.svg');
try {
response = JSON.parse(response);
} catch (e) {
}
var tempUrl = response && response.url;
try {
if (tempUrl) {
if (tempUrl.indexOf('images/cache') !== -1) tempUrl = CONSTANT_RESOURCES_URL_IMG + response.url.replace('images/cache', 'images');
else if (tempUrl.indexOf('images/data') !== -1) tempUrl = CONSTANT_RESOURCES_URL_IMG + response.url.replace('images/data', 'image');
else tempUrl = CONSTANT_RESOURCES_URL_IMG + tempUrl;
} else {
tempUrl = (atrrs.lazy.match(/perfil/) ? 'img/avatar.svg' : 'img/reload.svg');
}
} catch (e) {
}
var image = new Image();
image.src = tempUrl;
image.onload = function (event) {
tagName === 'IMG' ? element.prop('src', tempUrl) : element.css({'background-image': 'url(' + tempUrl + ')'});
};
image.onerror = function (event) {
var img = (atrrs.lazy.match(/perfil/) ? 'img/avatar.svg' : 'img/reload.svg');
tagName === 'IMG' ? element.prop('src', img) : element.css({'background-image': 'url(' + img + ')'});
}
};
// Fica observando alterações que ocorrem na view
atrrs.$observe('lazy', function () {
var regex_a = atrrs.lazy ? atrrs.lazy.match(/\B[\//\//]/) : undefined;
var regex_b = atrrs.lazy ? atrrs.lazy.match(/\b[\//]+$/) : undefined;
if (!regex_a && !regex_b) {
if (atrrs.lazy.indexOf('videos/data') !== -1) _callback(null, {url: (atrrs.lazy.replace('videos/data', 'videos')).replace('mp4', 'png')});
else _exec(WorkerHttpThead, CONSTANT_BASE_URL + atrrs.lazy + (atrrs.lazy.match(/post/) ? ("/" + $window.innerWidth) : ''), _callback);
}
});
};
return {
strict: 'A',
link: _link
}
}]);
})();
// ------------ Este é o erro que estou obtendo: ---------------
/*
Uncaught ReferenceError: notify is not defined
at XMLHttpRequest.xmlhttp.onreadystatechange (3a936af9-bb74-4043-ab69-0c01ddb94c37:7)
at workerMock (3a936af9-bb74-4043-ab69-0c01ddb94c37:17)
at onmessage (3a936af9-bb74-4043-ab69-0c01ddb94c37:20)
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment