Well I was trying to make images load faster on blog using lazy load that's when the default lightbox for images got disabled.
Apparently there's something obstructing the lightbox functioning in the lazy load script.
Here is lazy load script I used
(function () {
function r(e) {
var t = 0;
if (e.offsetParent) {
do t += e.offsetTop; while (e = e.offsetParent);
return t
}
}
var e = window.addEventListener || function (e, t) {
window.attachEvent("on" + e, t)
},
t = window.removeEventListener || function (e, t, n) {
window.detachEvent("on" + e, t)
},
n = {
cache: [],
mobileScreenSize: 500,
addObservers: function () {
e("scroll", n.throttledLoad), e("resize", n.throttledLoad)
},
removeObservers: function () {
t("scroll", n.throttledLoad, !1), t("resize", n.throttledLoad, !1)
},
throttleTimer: (new Date).getTime(),
throttledLoad: function () {
var e = (new Date).getTime();
e - n.throttleTimer >= 200 && (n.throttleTimer = e, n.loadVisibleImages())
},
loadVisibleImages: function () {
var e = window.pageYOffset || document.documentElement.scrollTop,
t = window.innerHeight || document.documentElement.clientHeight,
i = {
min: e - 300,
max: e + t + 300
},
s = 0;
while (s < n.cache.length) {
var o = n.cache[s],
u = r(o),
a = o.height || 0;
if (u >= i.min - a && u <= i.max) {
var f = o.getAttribute("data-src-mobile");
o.onload = function () {
this.className = "lazy-loaded"
}, f && screen.width <= n.mobileScreenSize ? o.src = f : o.src = o.getAttribute("data-src"), o.removeAttribute("data-src"), o.removeAttribute("data-src-mobile"), n.cache.splice(s, 1);
continue
}
s++
}
n.cache.length === 0 && n.removeObservers()
},
init: function () {
document.querySelectorAll || (document.querySelectorAll = function (e) {
var t = document,
n = t.documentElement.firstChild,
r = t.createElement("STYLE");
return n.appendChild(r), t.__qsaels = [], r.styleSheet.cssText = e + "{x:expression(document.__qsaels.push(this))}", window.scrollBy(0, 0), t.__qsaels
}), e("load", function r() {
var e = document.querySelectorAll("img[data-src]");
for (var i = 0; i < e.length; i++) {
var s = e[i];
n.cache.push(s)
}
n.addObservers(), n.loadVisibleImages(), t("load", r, !1)
})
}
};
n.init()
})()
You can see the disabled effect here on this site and the site with no lazy load. Just click on any image from the post to check the lightbox functioning.
I guess the lightbox functioning comes in from an external source which somehow I wasn't able to trace. I guess the data-src and src of the original and ones loaded over cause something bad to the lightbox.
Is there something I am doing wrong here? A solution to the problem will be very helpful.
Edit: Here is the lightbox plugin that I found:
kj = "lightbox",
function Co(a) {
var b = yo.V(),
c = b.h,
d = b.b;
if (d.lightbox) a(d.lightbox[1]);
else if (c.lightbox) c.lightbox[D]([1, a]);
else c.lightbox = [
[1, a]
], Q(b.a) ? Bo(b, kj) : b.d[D](kj)
}
if (this.a[x].lightboxEnabled) {
var b = this.a[x].lightboxModuleUrl,
c = this.a[x].lightboxCssUrl,
d = pq.V(),
e = Rm(b);
Ao(yo.V(), b, e);
d.f = c;
b = sn(Me, Yj, this.a.a);
for (c = 0; c < b[H]; c++) {
for (var e = ni + ir++, d = pq.V(), f = sn(ff, void 0, b[c]), h = f[H], s = [], t = 0; t < h; t++) {
var z = f[t].src,
A = null,
I = Hn(f[t]);
if (I) {
I = I[sb];
if (I != z) {
var Wa = z,
A = sq(I),
Wa = sq(Wa);
if (A && Wa && A[A[H] - 1] ==
Wa[Wa[H] - 1]) A = z, z = I, z = (I = sq(z)) && zm(I, td) ? z[w](/\/s(\d+)-h\//, Md) : z;
else continue
}
s[D]({
imageUrl: z,
thumbnailUrl: A
});
eo(f[t], ih, R(d.g, d, e, s[H] - 1))
}
}
0 < s[H] && (d.a[e] = s, d.d || (d.d = eo(k, lj, d.h, !1, d)))
}
}
here is the complete minified version
I'm not familiar with the exact lightbox you are using but I had a similar situation with a site I built where I was loading the images in after the page itself had finished loading and it broke the lightbox. The simplest solution (if your lightbox lets you do it easily) would be to call your lightbox function again after the images have been loaded.
Related
I'm scraping images from a comic site and it uses an encryption algorithm to retrieve the images and parse it to a blob link. I want to stop at the decryption and return the Uint8Array and use python code to write it to a file.
import execjs
def rfc(nam):
with open(nam, 'r') as f:
return f.read()
def decryptedData(lnk):
js = execjs.compile(rfc('getAndDecrypt.js'))
resp = js.call('i', lnk)
return bytes(list(resp.values()))
res = decryptedData('https://img.mwimser2.cc/static/upload/book/id/18928/547567/4c8ca89af48c44d45893f959b16447b2.webp?v=20220724')
with open('a.webp', 'wb') as f:
f.write(res)
// getAndDecrypt.js: get and decrypt image
let CryptoJS = require("crypto-js")
let jsdom = require("jsdom")
let { JSDOM } = jsdom
let dom = new JSDOM(`<!DOCTYPE html><html><body></body></html>`)
window = dom.window
document = window.document
XMLHttpRequest = window.XMLHttpRequest
var r = "my2ecret782ecret"
function i(e) {
let a = new XMLHttpRequest;
a.open("GET", e, false)
a.responseType = "arraybuffer" //this line gets changed
a.send()
return d(s2b(a.response), r)
}
function o(e) {
let t = e.sigBytes,
r = e.words,
a = new Uint8Array(t);
for (var n = 0, s = 0; n != t;) {
var i = r[s++];
if (a[n++] = (4278190080 & i) >>> 24, n == t) break;
if (a[n++] = (16711680 & i) >>> 16, n == t) break;
if (a[n++] = (65280 & i) >>> 8, n == t) break;
a[n++] = 255 & i
}
return a
}
function d(r, a) {
let s = r,
i = CryptoJS.enc.Utf8.parse(a),
l = CryptoJS.lib.WordArray.create(s),
f = o(CryptoJS.AES.decrypt({
ciphertext: l
}, i, {
iv: i,
padding: CryptoJS.pad.Pkcs7
}));
return f;
}
The link is here if you want to further investigate it.
$(function () {
webpMachine.webpSupport.then(e => {
var t = !1,
r = "my";
let a, n, s = "ret";
async function i(e, t) {
let a = new XMLHttpRequest;
a.open("GET", e, !0), a.responseType = "arraybuffer", a.onload = async function () {
4 == a.readyState && (200 == a.status ? t.src = await d(a.response, r, t) : (console.log(key, e), f(e, key)))
}, a.send()
}
function o(e) {
const t = e.sigBytes,
r = e.words,
a = new Uint8Array(t);
for (var n = 0, s = 0; n != t;) {
var i = r[s++];
if (a[n++] = (4278190080 & i) >>> 24, n == t) break;
if (a[n++] = (16711680 & i) >>> 16, n == t) break;
if (a[n++] = (65280 & i) >>> 8, n == t) break;
a[n++] = 255 & i
}
return a
}
r += "2ecret", r += "782ec", r += "ret", $("img.lazy_img").each(function (e) {
$(this).attr("data-original", "/static/images/imagecover.png"), $(this).on("load", function () {
($(this).attr("src").indexOf("blob:") > -1 || $(this).attr("src").indexOf("base64") > -1) && ($(this).css("width", "auto").css("display", "flex").css("min-height", "0px"), window.URL.revokeObjectURL($(this).attr("src")))
})
}), $("img.lazy_img").lazyload({
threshold: 1500,
effect: "fadeIn",
load: function (e) {
let t = $(this)[0],
r = t.getAttribute("src");
r.indexOf("blob:") < 0 && r.indexOf("base64") && i(t.getAttribute("data-r-src"), t)
}
});
const c = e => new Promise(t => setTimeout(t, e)),
l = e => {
let t = new FileReader;
return t.readAsDataURL(e), new Promise(e => {
t.onloadend = (() => {
e(t.result)
})
})
};
async function d(r, a, n) {
let s = r,
i = CryptoJS.enc.Utf8.parse(a),
l = CryptoJS.lib.WordArray.create(s),
d, f = o(CryptoJS.AES.decrypt({
ciphertext: l
}, i, {
iv: i,
padding: CryptoJS.pad.Pkcs7
})),
p = "";
if (e) {
let e = new Blob([f]);
p = URL.createObjectURL(e)
} else {
let e = 0;
for (;
"" === p && e < 100;) {
if (e++, !t) {
let e;
t = !0, p = await webpMachine.decode(f), t = !1
}
"" === p && await c(300)
}
"" == p && console.log($(n).attr("data-sort"), "fail!!")
}
return p
}
function f(e, t) {
let a = new XMLHttpRequest;
a.open("GET", e, !0), a.responseType = "arraybuffer", a.onload = function () {
200 == a.status && (t.src = d(a.response, r))
}, a.send()
}
})
});
This is the original code. Take a look at the XHR requests for the webp files.
nodejs version: v18.3.0
I've enabled mod_pagespeed, and now get this extra javascript added around the place where my HTML logo is defined. I'm not sure what this code does and how I can disable it?
<a href="http://www.example.com/" id="logo"><script pagespeed_no_defer="">//<![CDATA[
(function(){var g=this,h=function(b,d){var a=b.split("."),c=g;a[0]in c||!c.execScript||c.execScript("var "+a[0]);for(var e;a.length&&(e=a.shift());)a.length||void 0===d?c[e]?c=c[e]:c=c[e]={}:c[e]=d};var l=function(b){var d=b.length;if(0<d){for(var a=Array(d),c=0;c<d;c++)a[c]=b[c];return a}return[]};var m=function(b){var d=window;if(d.addEventListener)d.addEventListener("load",b,!1);else if(d.attachEvent)d.attachEvent("onload",b);else{var a=d.onload;d.onload=function(){b.call(this);a&&a.call(this)}}};var n,p=function(b,d,a,c,e){this.f=b;this.h=d;this.i=a;this.c=e;this.e={height:window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight,width:window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth};this.g=c;this.b={};this.a=[];this.d={}},q=function(b,d){var a,c,e=d.getAttribute("pagespeed_url_hash");if(a=e&&!(e in b.d))if(0>=d.offsetWidth&&0>=d.offsetHeight)a=!1;else{c=d.getBoundingClientRect();var f=document.body;a=c.top+("pageYOffset"in window?window.pageYOffset:(document.documentElement||f.parentNode||f).scrollTop);c=c.left+("pageXOffset"in window?window.pageXOffset:(document.documentElement||f.parentNode||f).scrollLeft);f=a.toString()+","+c;b.b.hasOwnProperty(f)?a=!1:(b.b[f]=!0,a=a<=b.e.height&&c<=b.e.width)}a&&(b.a.push(e),b.d[e]=!0)};p.prototype.checkImageForCriticality=function(b){b.getBoundingClientRect&&q(this,b)};h("pagespeed.CriticalImages.checkImageForCriticality",function(b){n.checkImageForCriticality(b)});h("pagespeed.CriticalImages.checkCriticalImages",function(){r(n)});var r=function(b){b.b={};for(var d=["IMG","INPUT"],a=[],c=0;c<d.length;++c)a=a.concat(l(document.getElementsByTagName(d[c])));if(0!=a.length&&a[0].getBoundingClientRect){for(c=0;d=a[c];++c)q(b,d);a="oh="+b.i;b.c&&(a+="&n="+b.c);if(d=0!=b.a.length)for(a+="&ci="+encodeURIComponent(b.a[0]),c=1;c<b.a.length;++c){var e=","+encodeURIComponent(b.a[c]);131072>=a.length+e.length&&(a+=e)}b.g&&(e="&rd="+encodeURIComponent(JSON.stringify(s())),131072>=a.length+e.length&&(a+=e),d=!0);t=a;if(d){c=b.f;b=b.h;var f;if(window.XMLHttpRequest)f=new XMLHttpRequest;else if(window.ActiveXObject)try{f=new ActiveXObject("Msxml2.XMLHTTP")}catch(k){try{f=new ActiveXObject("Microsoft.XMLHTTP")}catch(u){}}f&&(f.open("POST",c+(-1==c.indexOf("?")?"?":"&")+"url="+encodeURIComponent(b)),f.setRequestHeader("Content-Type","application/x-www-form-urlencoded"),f.send(a))}}},s=function(){var b={},d=document.getElementsByTagName("IMG");if(0==d.length)return{};var a=d[0];if(!("naturalWidth"in a&&"naturalHeight"in a))return{};for(var c=0;a=d[c];++c){var e=a.getAttribute("pagespeed_url_hash");e&&(!(e in b)&&0<a.width&&0<a.height&&0<a.naturalWidth&&0<a.naturalHeight||e in b&&a.width>=b[e].k&&a.height>=b[e].j)&&(b[e]={rw:a.width,rh:a.height,ow:a.naturalWidth,oh:a.naturalHeight})}return b},t="";h("pagespeed.CriticalImages.getBeaconData",function(){return t});h("pagespeed.CriticalImages.Run",function(b,d,a,c,e,f){var k=new p(b,d,a,e,f);n=k;c&&m(function(){window.setTimeout(function(){r(k)},0)})});})();pagespeed.CriticalImages.Run('/mod_pagespeed_beacon','http://www.example.com/slug','SLoDkQnME-',true,false,'gxYRJPh80JY');
//]]></script><img src="http://www.example.com/xlogo.png.pagespeed.ic.GAQP-mof5d.png" alt="Logo" pagespeed_url_hash="4083345942" onload="pagespeed.CriticalImages.checkImageForCriticality(this);"></a>
Here's a fiddle: http://jsfiddle.net/vdkdekuu/ and a beautified version:
(function() {
var g = this,
h = function(b, d) {
var a = b.split("."),
c = g;
a[0] in c || !c.execScript || c.execScript("var " + a[0]);
for (var e; a.length && (e = a.shift());) a.length || void 0 === d ? c[e] ? c = c[e] : c = c[e] = {} : c[e] = d
};
var l = function(b) {
var d = b.length;
if (0 < d) {
for (var a = Array(d), c = 0; c < d; c++) a[c] = b[c];
return a
}
return []
};
var m = function(b) {
var d = window;
if (d.addEventListener) d.addEventListener("load", b, !1);
else if (d.attachEvent) d.attachEvent("onload", b);
else {
var a = d.onload;
d.onload = function() {
b.call(this);
a && a.call(this)
}
}
};
var n, p = function(b, d, a, c, e) {
this.f = b;
this.h = d;
this.i = a;
this.c = e;
this.e = {
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
};
this.g = c;
this.b = {};
this.a = [];
this.d = {}
},
q = function(b, d) {
var a, c, e = d.getAttribute("pagespeed_url_hash");
if (a = e && !(e in b.d))
if (0 >= d.offsetWidth && 0 >= d.offsetHeight) a = !1;
else {
c = d.getBoundingClientRect();
var f = document.body;
a = c.top + ("pageYOffset" in window ? window.pageYOffset : (document.documentElement || f.parentNode || f).scrollTop);
c = c.left + ("pageXOffset" in window ? window.pageXOffset : (document.documentElement || f.parentNode || f).scrollLeft);
f = a.toString() + "," + c;
b.b.hasOwnProperty(f) ? a = !1 : (b.b[f] = !0, a = a <= b.e.height && c <= b.e.width)
}
a && (b.a.push(e), b.d[e] = !0)
};
p.prototype.checkImageForCriticality = function(b) {
b.getBoundingClientRect && q(this, b)
};
h("pagespeed.CriticalImages.checkImageForCriticality", function(b) {
n.checkImageForCriticality(b)
});
h("pagespeed.CriticalImages.checkCriticalImages", function() {
r(n)
});
var r = function(b) {
b.b = {};
for (var d = ["IMG", "INPUT"], a = [], c = 0; c < d.length; ++c) a = a.concat(l(document.getElementsByTagName(d[c])));
if (0 != a.length && a[0].getBoundingClientRect) {
for (c = 0; d = a[c]; ++c) q(b, d);
a = "oh=" + b.i;
b.c && (a += "&n=" + b.c);
if (d = 0 != b.a.length)
for (a += "&ci=" + encodeURIComponent(b.a[0]), c = 1; c < b.a.length; ++c) {
var e = "," + encodeURIComponent(b.a[c]);
131072 >= a.length + e.length && (a += e)
}
b.g && (e = "&rd=" + encodeURIComponent(JSON.stringify(s())), 131072 >= a.length + e.length && (a += e), d = !0);
t = a;
if (d) {
c = b.f;
b = b.h;
var f;
if (window.XMLHttpRequest) f = new XMLHttpRequest;
else if (window.ActiveXObject) try {
f = new ActiveXObject("Msxml2.XMLHTTP")
} catch (k) {
try {
f = new ActiveXObject("Microsoft.XMLHTTP")
} catch (u) {}
}
f && (f.open("POST", c + (-1 == c.indexOf("?") ? "?" : "&") + "url=" + encodeURIComponent(b)), f.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"), f.send(a))
}
}
},
s = function() {
var b = {},
d = document.getElementsByTagName("IMG");
if (0 == d.length) return {};
var a = d[0];
if (!("naturalWidth" in a && "naturalHeight" in a)) return {};
for (var c = 0; a = d[c]; ++c) {
var e = a.getAttribute("pagespeed_url_hash");
e && (!(e in b) && 0 < a.width && 0 < a.height && 0 < a.naturalWidth && 0 < a.naturalHeight || e in b && a.width >= b[e].k && a.height >= b[e].j) && (b[e] = {
rw: a.width,
rh: a.height,
ow: a.naturalWidth,
oh: a.naturalHeight
})
}
return b
},
t = "";
h("pagespeed.CriticalImages.getBeaconData", function() {
return t
});
h("pagespeed.CriticalImages.Run", function(b, d, a, c, e, f) {
var k = new p(b, d, a, e, f);
n = k;
c && m(function() {
window.setTimeout(function() {
r(k)
}, 0)
})
});
})();
pagespeed.CriticalImages.Run('/mod_pagespeed_beacon', 'http://www.example.com/slug', 'SLoDkQnME-', true, false, 'gxYRJPh80JY');
That particular JS snippet implements "critical image beaconing", which is a part of the lazyload_images filter. lazyload_images is a filter which can speed up your site by only loading images after they scroll into view. This keeps "below-the-fold" images (images which require vertical scrolling to see) from competing for the network with more critical resources. By default, when this filter is enabled, all images will be lazyloaded.
The critical image beacon is an enhancement to the lazyload_images filter. It runs on the client's browser and determines which images are above-the-fold by default. It send this information back to the server, and on future requests, only below-the-fold images will be lazyloaded. This helps the above-the-fold content load as quickly as possible. If it's working correctly, after a few page views, mod_pagespeed will stop beaconing on every request, and reduce the amount of pages it instruments. You can disable this feature with the ModPagespeedCriticalImagesBeaconEnabled option.
You can read more about beaconing in mod_pagespeed here, and about the lazyload_images here.
Add the parameter ModPagespeed=off to the URL.
how to stop using google page speed
I'm working on a clients Squarespace site and there is a function in the common.js file that is causing problems. The file is included in every site and is uneditable. My question is how do I properly run a removeEventListener() to stop it from firing?
1698: function(l, m, h) {
YUI.add("squarespace-plugin-scroll-lock", function(a) {
a.namespace("Squarespace.Plugin").ScrollLock = a.Base.create("ScrollLock", a.Plugin.Base, [], {
initializer: function(e) {
var b = this.get("host"),
c = b.getDOMNode();
this.listener = function(d) {
d.stopPropagation();
if (!a.Lang.isNumber(c.scrollTop)) return d.preventDefault(), !1;
var f = parseInt(b.getComputedStyle("height"), 10),
g = c.scrollTop,
f = c.scrollHeight - f,
e = d.wheelDelta || -d.detail;
if (0 >= g && 0 < e || g >= f && 0 > e) return d.preventDefault(), !1
};
c.addEventListener ? (c.addEventListener("mousewheel", this.listener), c.addEventListener("DOMMouseScroll", this.listener), c.addEventListener("MozMousePixelScroll", this.listener)) : c.attachEvent && c.attachEvent("onmousewheel", this.listener)
},
destructor: function() {
var a = this.get("host").getDOMNode();
a.removeEventListener ? (a.removeEventListener("mousewheel", this.listener), a.removeEventListener("DOMMouseScroll", this.listener), a.removeEventListener("MozMousePixelScroll", this.listener)) : a.detachEvent && a.detachEvent("onmousewheel", this.listener)
}
}, {
NS: "ScrollLock",
ATTRS: {}
})
}, "1.0", {
requires: ["base", "plugin", "node"]
})
The javascript I am using:
javascript: c = '{unit}, ({coords}) {player} |{distance}| {return}';
p = ['Scout', 'LC', 'HC', 'Axe', 'Sword', 'Ram', '***Noble***'];
function V() {
return 1;
}
window.onerror = V;
function Z() {
d = (window.frames.length > 0) ? window.main.document : document;
aid = d.getElementById('editInput').parentNode.innerHTML.match(/id\=(\d+)/)[1];
function J(e) {
vv = e.match(/\d+\|\d+/g);
return (vv ? vv[vv.length - 1].match(/((\d+)\|(\d+))/) : null);
}
function K(e) {
f = parseInt(e, 10);
return (f > 9 ? f : '0' + f);
}
function L(g, e) {
return g.getElementsByTagName(e);
}
function N(g) {
return g.innerHTML;
}
function M(g) {
return N(L(g, 'a')[0]);
}
function O() {
return k.insertRow(E++);
}
function W(f) {
return B.insertCell(f);
}
function P(g, e) {
g.innerHTML = e;
return g;
}
function X(e) {
C = B.appendChild(d.createElement('th'));
return P(C, e);
}
function Y(f) {
return K(f / U) + ':' + K(f % (U) / T) + ':' + K(f % T);
}
U = 3600;
T = 60;
R = 'table';
S = 'width';
s = L(document, R);
for (j = 0; j < s.length; j++) {
s[j].removeAttribute(S);
if (s[j].className == 'main') {
s = L(L(s[j], 'tbody')[0], R);
break;
}
}
D = 0;
for (j = 0; j < s.length; j++) {
s[j].removeAttribute(S);
if (s[j].className = 'vis') {
k = s[j];
if (t = k.rows) {
D = t.length;
break;
}
}
}
for (E = 0; E < D; E++) {
l = t[E];
m = (u = l.cells) ? u.length : 0;
if (m) {
u[m - 1].colSpan = 5 - m;
if (N(u[0]) == 'Arrival:') {
Q = new Date(N(u[1]).replace(/<.*/i, ''));
} else {
if (N(u[0]) == 'Arrival in:') {
v = N(u[1]).match(/\d+/ig);
}
}
if (E == 1) {
G = M(u[2]);
}
if (E == 2) {
w = J(M(u[1]));
}
if (E == 4) {
x = J(M(u[1]));
}
}
}
y = v[0] * U + v[1] * T + v[2] * 1;
n = w[2] - x[2];
o = w[3] - x[3];
F = Math.sqrt(n * n + o * o);
H = F.toFixed(2);
E = D - 2;
s = L(k, 'input');
i = s[1];
h = s[0];
h.size = T;
B = O();
P(W(0), 'Distance:').colSpan = 2;
P(W(1), H + ' Fields').colSpan = 2;
B = O();
X('Unit');
X('Sent');
X('Duration');
X('Name to');
c = c.replace(/\{coords\}/i, w[1]).replace(/\{distance\}/i, H).replace(/\{player\}/i, G);
for (j in p) {
z = Math.round([9.00000000, 10.00000000, 11.00000000, 18.0000000015, 22.00000000, 30.00000000, 35.0000000][j] * T * F);
A = z - y;
if (A > 0) {
I = Y(z);
B = O();
P(W(0), p[j]);
P(W(1), A < T && 'just now' || A < U && Math.floor(A / T) + ' mins ago' || Y(A) + ' ago');
P(W(2), I);
C = W(3);
q = C.appendChild(i.cloneNode(1));
r = C.appendChild(h.cloneNode(1));
r.id = 'I' + j;
r.value = c.replace(/\{duration\}/i, I).replace(/\{sent\}/i, new Date(Q.valueOf() - z * 1000).toLocaleString().replace(/.\d{4}/i, '').replace(/(\w{3})\w*/i, '$1')).replace(/\{return\}/i, new Date(Q.valueOf() + z * 1000).toString().replace(/\w+\s*/i, '').replace(/(\d*:\d*:\d*)(.*)/i, '$1')).replace(/\{unit\}/i, p[j]).replace(/\{attack_id\}/i, aid);
q.onmousedown = new Function('h.value=d.getElementById(\'I' + j + '\').value;');
}
}
}
Z();
The error I receive:
Uncaught TypeError: Cannot read property 'parentNode' of null
A URL looks like this:
game.php?village=2100&id=4348754&type=other&screen=info_command
There are two possibilities:
editInput is a typo, and the actual id of that element is different (ids are case-sensitive).
You are executing this code while the DOM is not ready. To prevent this, execute the code just before the </body> closing tag, or wrap it in an event handler for the load event of window or the DOMContentLoaded event of document.
EDITED How to wrap your code:
window.onload = function() {
//your code here
};
In my case it was a conflict between slider and form validator as they were located on different pages but javascript file would of target both of them simultaneously, so all pages that had no slider would come up with "Cannot read property 'parentNode' of null" error, so I have added to the slider If statement:
if(document.getElementById("mainImage")){
var myImage = document.getElementById("mainImage");
var linkElement = myImage.parentNode;
that solved my problem, try it
I was trying to remove child element from parent:
constructor(private renderer: Renderer2) { }
removeChildEl() {
this.renderer.removeChild(parent, child);
}
but for some reason parent-element does not exist so I need to check via if condition:
removeChildEl() {
if(parent)
this.renderer.removeChild(parent, child);
}
so if the parent exists then remove the child otherwise do nothing.
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 12 years ago.
I've been trying to figure it out for hours and i didn't success, This Counter from Apple 1 billion downloads prize. doesn't use flash at all, only javascript and 0-9 images, which makes it really cool. Now after stackoverflow successed to extract google's pacman, can we do that?
P.S I can't even know if this is using prototype or scriptaculous since they're both included.
Here it is: http://images.apple.com/global/scripts/downloadcounter.js
StepTimingFunction = {
timingFunctionForStepCount: function (a) {
return function (b) {
return ((b * (a - 1)) >> 0) / ((a - 1))
}
}
};
DownloadCounter = Class.create();
Object.extend(DownloadCounter.prototype, {
initialize: function (a) {
this._url = a;
this.loadData();
this._isCounting = true
},
setIsCounting: function (a) {
this._isCounting = a
},
stop: function () {
if (this._isCounting) {
if (this._drawTimeout) {
window.clearTimeout(this._drawTimeout)
}
this.setIsCounting(false);
if (this._delegate && typeof this._delegate.counterDidStop === "function") {
this._delegate.counterDidStop(this)
}
}
},
start: function () {
if (!this._isCounting) {
this.loadData();
this.setIsCounting(true);
if (this._delegate && typeof this._delegate.counterDidStart === "function") {
this._delegate.counterDidStart(this)
}
}
},
isCounting: function () {
return this._isCounting
},
_delegate: null,
setDelegate: function (a) {
this._delegate = a
},
delegate: function () {
return this._delegate
},
loadData: function () {
if (this._nextUpdateTimeout) {
window.clearTimeout(this._nextUpdateTimeout);
this._nextUpdateTimeout = null
}
var a = document.location.href.toString();
a = a.replace(/.apple.com\/.*$/, ".apple.com");
new Ajax.Request((a + this._url + "?r=" + Math.random()), {
method: "get",
onSuccess: this.dataRequestDidFinishLoading.bind(this)
})
},
dataRequestDidFinishLoading: function (o) {
var k = o.responseText.split("|"),
n, d, j, g, l, h, b, f, e, m, a, i, c;
localServerBasedReferenceTime = Date.parse(o.getResponseHeader("Date"));
if (k.length === 3) {
n = k[0].split(" ");
d = n[1];
date = n[0].split("-");
this.setRate(parseInt(k[2]) / 3600000);
l = date[0];
g = date[1];
j = date[2];
a = Date.parse(g + " " + l + ", " + j + " " + d + " GMT-0700");
e = new Date(a + 3600000);
m = e.getTime() - a + 1000;
this._nextUpdateTimeout = setTimeout(this.loadData.bind(this), m);
if (typeof localServerBasedReferenceTime === "number") {
this._lastReferenceTime = localServerBasedReferenceTime
} else {
b = new Date();
this._lastReferenceTime = b.getTime()
}
f = this._lastReferenceTime - a;
i = Math.floor(parseInt(k[1]) + f * (this._rate));
this.setCurrentCount(i);
this.setNeedsDisplayIfNeeded()
}
},
setNeedsDisplayIfNeeded: function () {
if (!this._drawTimeout) {
this._drawTimeout = setTimeout(this.draw.bind(this), this._drawRefreshRate)
}
},
setElement: function (c) {
this._element = c;
var b = this._element.getElementsByClassName("digitGroupSeparator");
if (b.length > 0) {
var a = b[0];
this._element.removeChild(a);
this.setDigitGroupSeparatorTemplateElement(a)
}
this._element.empty();
this.createDigitElementsIfNeeded();
this.setNeedsDisplayIfNeeded()
},
setDigitGroupSeparatorTemplateElement: function (a) {
this._digitGroupSeparatorTemplateElement = a
},
_currentCount: 0,
setCurrentCount: function (a) {
if (a !== this._currentCount) {
this._currentCount = a;
this.createDigitElementsIfNeeded()
}
},
digitTemplateElement: function () {
if (!this._digitTemplateElement) {
this._digitTemplateElement = document.createElement("span");
$(this._digitTemplateElement).addClassName("digit");
var a = document.createElement("div"),
b = document.createElement("div"),
c = document.createElement("div");
$(a).addClassName("digitText");
$(b).addClassName("digitImage");
this._digitTemplateElement.appendChild(a);
this._digitTemplateElement.appendChild(b);
$(c).addClassName("digitImageElement");
b.appendChild(c.cloneNode(true));
b.appendChild(c)
}
return this._digitTemplateElement
},
createDigitElementsIfNeeded: function () {
if (this._element && (!this._digitElements || this._digitElements.length !== this._currentCount.toString().length)) {
this._element.empty();
this._createDigitElements()
}
},
_createDigitElements: function () {
if (!this._digitElements) {
this._digitElements = []
}
var e = 0,
b = (this._maxCount && this._currentCount >= this._maxCount) ? this._maxCount.toString().length : this._currentCount.toString().length,
c = document.createDocumentFragment(),
a, h = this.digitTemplateElement(),
g = this._digitGroupSeparatorTemplateElement,
d = (this._maxCount && this._currentCount >= this._maxCount) ? String(this._maxCount) : String(this._currentCount),
f;
if (!g) {
g = document.createElement("span");
$(g).addClassName("digitGroupSeparator")
}
for (e = 0 + this._digitElements.length; e < b; e++) {
a = h.cloneNode(true);
f = parseInt(d.charAt(b - (e + 1)));
a.lastChild.style.top = "-" + (f * (this._digitImageAnimationCount * this._digitImageHeight)) + "px";
this._digitElements[e] = a;
if (e > 0 && ((e) % 3 == 0)) {
c.insertBefore(g.cloneNode(true), c.firstChild)
}
c.insertBefore(a, c.firstChild)
}
this._element.insertBefore(c, this._element.firstChild)
},
currentCount: function () {
return this._currentCount
},
setRate: function (a) {
this._rate = a
},
rate: function () {
return this._rate
},
_drawRefreshRate: 50,
_digitImageHeight: 38,
setDigitImageHeight: function (a) {
this._digitImageHeight = a
},
_digitImageAnimationCount: 6,
setDigitImageAnimationCount: function (a) {
this._digitImageAnimationCount = a
},
_maxCount: false,
setMaxCount: function (a) {
this._maxCount = a
},
draw: function () {
window.clearTimeout(this._drawTimeout);
this._drawTimeout = null;
var h = this._drawRefreshRate,
e, j, k, c, a, l, o, b, n, d, m, p = this._digitImageHeight * this._digitImageAnimationCount,
g, f = this._digitElements,
q;
if (this._element) {
m = String(this._currentCount);
this._currentCount = this._currentCount + Math.floor(this._rate * h);
if (this._delegate && typeof this._delegate.counterDidReachValue === "function") {
this._delegate.counterDidReachValue(this, this._currentCount)
}
if (this._maxCount && this._currentCount >= this._maxCount) {
this._isCounting = false
}
if (!this._isCounting) {
return
}
e = (this._maxCount && this._currentCount >= this._maxCount) ? String(this._maxCount) : String(this._currentCount);
j = e.length;
k = j - 1;
for (c = k; c >= 0; c--) {
l = parseInt(e.charAt(c));
o = parseInt(m.charAt(c));
if (l !== o) {
if (!((k - c) < f.length)) {
this._createDigitElements()
}
a = f[k - c].lastChild;
if (a.___animating !== true) {
n = o * p;
if (l > o) {
b = l * p
} else {
b = (o + (10 - o) + l) * p
}
if (a.style.top !== (d = "-" + n + "px")) {
a.style.top = d
}
g = 1 + ((b - n) / this._digitImageHeight);
a.___animating = true;
q = new Effect.Move(a, {
x: 0,
y: (-1 * b),
duration: 0.4,
mode: "absolute",
transition: StepTimingFunction.timingFunctionForStepCount(g)
});
q.__element = a;
q.finish = function (i) {
if (window.removeEventListener) {
window.removeEventListener("unload", arguments.callee, false)
}
if (this.__element !== undefined) {
this.__element.___animating = false
}
};
if (window.addEventListener) {
window.addEventListener("unload", q.finish, false)
}
}
}
}
}
this._lastReferenceTime = (this._lastReferenceTime + h);
this.setNeedsDisplayIfNeeded()
}
});
Looks like it's a JS counter coupled with CSS.
The hearth of the whole script is this single image: http://images.apple.com/itunes/10-billion-app-countdown/images/filmstrip.png
Now everything should be obvious.
HTML placeholder for a single digit:
<div class="digit-placeholder"></div>
CSS that styles that placeholder:
.digit-placeholder {
/* Dimensions of a single "frame" */
width: 50px;
height: 75px;
background-image: url(...);
background-position: 0 0;
}
To display digit 7 you just have to move background (background-positon property) to the following coordinates: 0 -2800px (that's only an example). To display 8 move it to 0 -3400px.
To create an animation (change from 7 to 8) you just have to move background from -2800 to -3400 with a step of 60 in some period of time (let's say 0.5 second).
All you have to do is to clone that several times (10 times for one billion) and compute that period of time for each digit.
There's a file stored on the apple server which contains a count and a timestamp:
http://www.apple.com/autopush/us/itunes/includes/countdown.inc
That should give you a rough count.
Before I go to bed:
var number = '';
$('.digitImage').each(function(i) {
number += Math.abs($(this).position().top) / 618;
});
console.log(+number);
Now how long did that take? 3 minutes trying to figure out how do install a bookmarklet in chrome for injecting jQuery... 5 more minutes to get it working.