Related
Thanks for any help or guidance first of all.
We run a Shopify store and we're getting console errors. They all say:
Failed to load resource: the server responded with a status of 404 () ... blue.png
Failed to load resource: the server responded with a status of 404 () ... red.png
Failed to load resource: the server responded with a status of 404 () ... green.png
Nothing seems to be showing up incorrectly on the site, and it seems to be happening only on pages that have products. I expect it be caused by code in the background that's cycling through and grabbing product info including images. But because everything is showing up fine, I don't know why/where it's trying to GET the images.
I read some 'how to fix console error articles' online that (I think) helped me determine the line of code that's causing the issue. I could be wrong. I activated "pause on caught exceptions" and it stopped on this:
It's a jQuery v1.11.2 file.
Everything below was marked with the squiggly red line, with a tooltip indicating it was the source of the error.
This code appears at the very end of the file.
Is it actually being caused by the jQuery file itself, or something that's calling the jQuery script to run a function?
If it's the latter, how to I find out what's calling the jQuery file?
How do I go about fixing the issue?
Thanks for any help or guidance in helping me figure this out.
{return a.offsetWidth <= 0 && a.offsetHeight <= 0 || !k.reliableHiddenOffsets() && "none" === (a.style && a.style.display || m.css(a, "display"))
}, m.expr.filters.visible = function(a) {
return !m.expr.filters.hidden(a)
};
var Qc = /%20/g,
Rc = /\[\]$/,
Sc = /\r?\n/g,
Tc = /^(?:submit|button|image|reset|file)$/i,
Uc = /^(?:input|select|textarea|keygen)/i;
function Vc(a, b, c, d) {
var e;
if (m.isArray(b)) m.each(b, function(b, e) {
c || Rc.test(a) ? d(a, e) : Vc(a + "[" + ("object" == typeof e ? b : "") + "]", e, c, d)
});
else if (c || "object" !== m.type(b)) d(a, b);
else
for (e in b) Vc(a + "[" + e + "]", b[e], c, d)
}
m.param = function(a, b) {
var c, d = [],
e = function(a, b) {
b = m.isFunction(b) ? b() : null == b ? "" : b, d[d.length] = encodeURIComponent(a) + "=" + encodeURIComponent(b)
};
if (void 0 === b && (b = m.ajaxSettings && m.ajaxSettings.traditional), m.isArray(a) || a.jquery && !m.isPlainObject(a)) m.each(a, function() {
e(this.name, this.value)
});
else
for (c in a) Vc(c, a[c], b, e);
return d.join("&").replace(Qc, "+")
}, m.fn.extend({
serialize: function() {
return m.param(this.serializeArray())
},
serializeArray: function() {
return this.map(function() {
var a = m.prop(this, "elements");
return a ? m.makeArray(a) : this
}).filter(function() {
var a = this.type;
return this.name && !m(this).is(":disabled") && Uc.test(this.nodeName) && !Tc.test(a) && (this.checked || !W.test(a))
}).map(function(a, b) {
var c = m(this).val();
return null == c ? null : m.isArray(c) ? m.map(c, function(a) {
return {
name: b.name,
value: a.replace(Sc, "\r\n")
}
}) : {
name: b.name,
value: c.replace(Sc, "\r\n")
}
}).get()
}
}), m.ajaxSettings.xhr = void 0 !== a.ActiveXObject ? function() {
return !this.isLocal && /^(get|post|head|put|delete|options)$/i.test(this.type) && Zc() || $c()
} : Zc;
var Wc = 0,
Xc = {},
Yc = m.ajaxSettings.xhr();
a.attachEvent && a.attachEvent("onunload", function() {
for (var a in Xc) Xc[a](void 0, !0)
}), k.cors = !!Yc && "withCredentials" in Yc, Yc = k.ajax = !!Yc, Yc && m.ajaxTransport(function(a) {
if (!a.crossDomain || k.cors) {
var b;
return {
send: function(c, d) {
var e, f = a.xhr(),
g = ++Wc;
if (f.open(a.type, a.url, a.async, a.username, a.password), a.xhrFields)
for (e in a.xhrFields) f[e] = a.xhrFields[e];
a.mimeType && f.overrideMimeType && f.overrideMimeType(a.mimeType), a.crossDomain || c["X-Requested-With"] || (c["X-Requested-With"] = "XMLHttpRequest");
for (e in c) void 0 !== c[e] && f.setRequestHeader(e, c[e] + "");
f.send(a.hasContent && a.data || null), b = function(c, e) {
var h, i, j;
if (b && (e || 4 === f.readyState))
if (delete Xc[g], b = void 0, f.onreadystatechange = m.noop, e) 4 !== f.readyState && f.abort();
else {
j = {}, h = f.status, "string" == typeof f.responseText && (j.text = f.responseText);
try {
i = f.statusText
} catch (k) {
i = ""
}
h || !a.isLocal || a.crossDomain ? 1223 === h && (h = 204) : h = j.text ? 200 : 404
}
j && d(h, i, j, f.getAllResponseHeaders())
}, a.async ? 4 === f.readyState ? setTimeout(b) : f.onreadystatechange = Xc[g] = b : b()
},
abort: function() {
b && b(void 0, !0)
}
}
}
});
function Zc() {
try {
return new a.XMLHttpRequest
} catch (b) {}
}
function $c() {
try {
return new a.ActiveXObject("Microsoft.XMLHTTP")
} catch (b) {}
}
m.ajaxSetup({
accepts: {
script: "text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"
},
contents: {
script: /(?:java|ecma)script/
},
converters: {
"text script": function(a) {
return m.globalEval(a), a
}
}
}), m.ajaxPrefilter("script", function(a) {
void 0 === a.cache && (a.cache = !1), a.crossDomain && (a.type = "GET", a.global = !1)
}), m.ajaxTransport("script", function(a) {
if (a.crossDomain) {
var b, c = y.head || m("head")[0] || y.documentElement;
return {
send: function(d, e) {
b = y.createElement("script"), b.async = !0, a.scriptCharset && (b.charset = a.scriptCharset), b.src = a.url, b.onload = b.onreadystatechange = function(a, c) {
(c || !b.readyState || /loaded|complete/.test(b.readyState)) && (b.onload = b.onreadystatechange = null, b.parentNode && b.parentNode.removeChild(b), b = null, c || e(200, "success"))
}, c.insertBefore(b, c.firstChild)
},
abort: function() {
b && b.onload(void 0, !0)
}
}
}
});
var _c = [],
ad = /(=)\?(?=&|$)|\?\?/;
m.ajaxSetup({
jsonp: "callback",
jsonpCallback: function() {
var a = _c.pop() || m.expando + "_" + vc++;
return this[a] = !0, a
}
}), m.ajaxPrefilter("json jsonp", function(b, c, d) {
var e, f, g, h = b.jsonp !== !1 && (ad.test(b.url) ? "url" : "string" == typeof b.data && !(b.contentType || "").indexOf("application/x-www-form-urlencoded") && ad.test(b.data) && "data");
return h || "jsonp" === b.dataTypes[0] ? (e = b.jsonpCallback = m.isFunction(b.jsonpCallback) ? b.jsonpCallback() : b.jsonpCallback, h ? b[h] = b[h].replace(ad, "$1" + e) : b.jsonp !== !1 && (b.url += (wc.test(b.url) ? "&" : "?") + b.jsonp + "=" + e), b.converters["script json"] = function() {
return g || m.error(e + " was not called"), g[0]
}, b.dataTypes[0] = "json", f = a[e], a[e] = function() {
g = arguments
}, d.always(function() {
a[e] = f, b[e] && (b.jsonpCallback = c.jsonpCallback, _c.push(e)), g && m.isFunction(f) && f(g[0]), g = f = void 0
}), "script") : void 0
}), m.parseHTML = function(a, b, c) {
if (!a || "string" != typeof a) return null;
"boolean" == typeof b && (c = b, b = !1), b = b || y;
var d = u.exec(a),
e = !c && [];
return d ? [b.createElement(d[1])] : (d = m.buildFragment([a], b, e), e && e.length && m(e).remove(), m.merge([], d.childNodes))
};
var bd = m.fn.load;
m.fn.load = function(a, b, c) {
if ("string" != typeof a && bd) return bd.apply(this, arguments);
var d, e, f, g = this,
h = a.indexOf(" ");
return h >= 0 && (d = m.trim(a.slice(h, a.length)), a = a.slice(0, h)), m.isFunction(b) ? (c = b, b = void 0) : b && "object" == typeof b && (f = "POST"), g.length > 0 && m.ajax({
url: a,
type: f,
dataType: "html",
data: b
}).done(function(a) {
e = arguments, g.html(d ? m("<div>").append(m.parseHTML(a)).find(d) : a)
}).complete(c && function(a, b) {
g.each(c, e || [a.responseText, b, a])
}), this
}, m.each(["ajaxStart", "ajaxStop", "ajaxComplete", "ajaxError", "ajaxSuccess", "ajaxSend"], function(a, b) {
m.fn[b] = function(a) {
return this.on(b, a)
}
}), m.expr.filters.animated = function(a) {
return m.grep(m.timers, function(b) {
return a === b.elem
}).length
};
var cd = a.document.documentElement;
function dd(a) {
return m.isWindow(a) ? a : 9 === a.nodeType ? a.defaultView || a.parentWindow : !1
}
m.offset = {
setOffset: function(a, b, c) {
var d, e, f, g, h, i, j, k = m.css(a, "position"),
l = m(a),
n = {};
"static" === k && (a.style.position = "relative"), h = l.offset(), f = m.css(a, "top"), i = m.css(a, "left"), j = ("absolute" === k || "fixed" === k) && m.inArray("auto", [f, i]) > -1, j ? (d = l.position(), g = d.top, e = d.left) : (g = parseFloat(f) || 0, e = parseFloat(i) || 0), m.isFunction(b) && (b = b.call(a, c, h)), null != b.top && (n.top = b.top - h.top + g), null != b.left && (n.left = b.left - h.left + e), "using" in b ? b.using.call(a, n) : l.css(n)
}
}, m.fn.extend({
offset: function(a) {
if (arguments.length) return void 0 === a ? this : this.each(function(b) {
m.offset.setOffset(this, a, b)
});
var b, c, d = {
top: 0,
left: 0
},
e = this[0],
f = e && e.ownerDocument;
if (f) return b = f.documentElement, m.contains(b, e) ? (typeof e.getBoundingClientRect !== K && (d = e.getBoundingClientRect()), c = dd(f), {
top: d.top + (c.pageYOffset || b.scrollTop) - (b.clientTop || 0),
left: d.left + (c.pageXOffset || b.scrollLeft) - (b.clientLeft || 0)
}) : d
},
position: function() {
if (this[0]) {
var a, b, c = {
top: 0,
left: 0
},
d = this[0];
return "fixed" === m.css(d, "position") ? b = d.getBoundingClientRect() : (a = this.offsetParent(), b = this.offset(), m.nodeName(a[0], "html") || (c = a.offset()), c.top += m.css(a[0], "borderTopWidth", !0), c.left += m.css(a[0], "borderLeftWidth", !0)), {
top: b.top - c.top - m.css(d, "marginTop", !0),
left: b.left - c.left - m.css(d, "marginLeft", !0)
}
}
},
offsetParent: function() {
return this.map(function() {
var a = this.offsetParent || cd;
while (a && !m.nodeName(a, "html") && "static" === m.css(a, "position")) a = a.offsetParent;
return a || cd
})
}
}), m.each({
scrollLeft: "pageXOffset",
scrollTop: "pageYOffset"
}, function(a, b) {
var c = /Y/.test(b);
m.fn[a] = function(d) {
return V(this, function(a, d, e) {
var f = dd(a);
return void 0 === e ? f ? b in f ? f[b] : f.document.documentElement[d] : a[d] : void(f ? f.scrollTo(c ? m(f).scrollLeft() : e, c ? e : m(f).scrollTop()) : a[d] = e)
}, a, d, arguments.length, null)
}
}), m.each(["top", "left"], function(a, b) {
m.cssHooks[b] = Lb(k.pixelPosition, function(a, c) {
return c ? (c = Jb(a, b), Hb.test(c) ? m(a).position()[b] + "px" : c) : void 0
})
}), m.each({
Height: "height",
Width: "width"
}, function(a, b) {
m.each({
padding: "inner" + a,
content: b,
"": "outer" + a
}, function(c, d) {
m.fn[d] = function(d, e) {
var f = arguments.length && (c || "boolean" != typeof d),
g = c || (d === !0 || e === !0 ? "margin" : "border");
return V(this, function(b, c, d) {
var e;
return m.isWindow(b) ? b.document.documentElement["client" + a] : 9 === b.nodeType ? (e = b.documentElement, Math.max(b.body["scroll" + a], e["scroll" + a], b.body["offset" + a], e["offset" + a], e["client" + a])) : void 0 === d ? m.css(b, c, g) : m.style(b, c, d, g)
}, b, f ? d : void 0, f, null)
}
})
}), m.fn.size = function() {
return this.length
}, m.fn.andSelf = m.fn.addBack, "function" == typeof define && define.amd && define("jquery", [], function() {
return m
});
var ed = a.jQuery,
fd = a.$;
return m.noConflict = function(b) {
return a.$ === m && (a.$ = fd), b && a.jQuery === m && (a.jQuery = ed), m
}, typeof b === K && (a.jQuery = a.$ = m), m
});
jQuery shouldn't be grabbing any files all by itself.
Following are the things that you can try.
You can click on the error in chrome console, that will take you to the error location in the scripts. Sometimes it will take you to the function which handles the error and not the one which causes it. In this case follow second.
You can expand the Stacktrace in the console to see the call stack and verify if there are functions in the call stack which are loading these images.
You can check under the Network tab to check the call to the images. In Chrome Network console you would see the a column named Initiator (After Name,Status,Type). If you click on the link in this column against the image call, you chrome will open then script and move cursor to the line which initiated the call to image. If source code there is minified you can click on the {} (Pretty Print) icon at the bottom of source code editor. That will format the code, then you will be able to pin point the source code line that's causing the issue.
Finally brute force, check for the references to the blue.png or any other files in your source code.
Dreamweaver colors many lines red with warning. The script works perfectly with jQuery 3! So are these DreamWeaver warnings to be neglected or should (some of these) be changed, and if so how? I have manually written them down since the can only be seen when hovering the mouse over the line numbers.
Missing semicolon (line 2)
Use strict statement (line 4)
Expected === but saw == (line 10)
Expected !==but saw != (line 23)
Expected and assignment or call but saw expression (line 33)
Missing semicolon (41)
Expected === but saw == (43)
Missing use strict statement (45)
the body of a for in statement should be wrapped in an if statement to filter unwanted properties from the prototype (46)
Expected { but saw e (52)
Expected === but saw == (53)
Expecte { but saw for (54)
Expected { but saw e (55)
Expected === but saw == (60)
Expected and assignment or call but saw expression (70)
Expected and assignment or call but saw expression (75)
Missing semicolon (77)
Expected === but saw == (84)
Expected and assignment or call but saw expression (92)
Expected { but saw for (101)
Expected and assignment or call but saw expression (103)
! function(t, e) {
"function" == typeof define && define.amd ? define("ev-emitter/ev-emitter", e) : "object" == typeof module && module.exports ? module.exports = e() : t.EvEmitter = e()
}(this, function() {
function t() {}
var e = t.prototype;
return e.on = function(t, e) {
if (t && e) {
var i = this._events = this._events || {},
n = i[t] = i[t] || [];
return -1 == n.indexOf(e) && n.push(e), this
}
}, e.once = function(t, e) {
if (t && e) {
this.on(t, e);
var i = this._onceEvents = this._onceEvents || {},
n = i[t] = i[t] || [];
return n[e] = !0, this;
}
}, e.off = function(t, e) {
var i = this._events && this._events[t];
if (i && i.length) {
var n = i.indexOf(e);
return -1 != n && i.splice(n, 1), this
}
}, e.emitEvent = function(t, e) {
var i = this._events && this._events[t];
if (i && i.length) {
var n = 0,
o = i[n];
e = e || [];
for (var r = this._onceEvents && this._onceEvents[t]; o;) {
var s = r && r[o];
s && (this.off(t, o), delete r[o]), o.apply(this, e), n += s ? 0 : 1, o = i[n]
}
return this;
}
}, t;
}),
function(t, e) {
"use strict";
"function" == typeof define && define.amd ? define(["ev-emitter/ev-emitter"], function(i) {
return e(t, i);
}) : "object" == typeof module && module.exports ? module.exports = e(t, require("ev-emitter")) : t.imagesLoaded = e(t, t.EvEmitter)
}(window, function(t, e) {
function i(t, e) {
for (var i in e) t[i] = e[i];
return t;
}
function n(t) {
var e = [];
if (Array.isArray(t)) e = t;
else if ("number" == typeof t.length)
for (var i = 0; i < t.length; i++) e.push(t[i]);
else e.push(t);
return e;
}
function o(t, e, r) {
return this instanceof o ? ("string" == typeof t && (t = document.querySelectorAll(t)), this.elements = n(t), this.options = i({}, this.options), "function" == typeof e ? r = e : i(this.options, e), r && this.on("always", r), this.getImages(), h && (this.jqDeferred = new h.Deferred), void setTimeout(function() {
this.check();
}.bind(this))) : new o(t, e, r);
}
function r(t) {
this.img = t;
}
function s(t, e) {
this.url = t, this.element = e, this.img = new Image();
}
var h = t.jQuery,
a = t.console;
o.prototype = Object.create(e.prototype), o.prototype.options = {}, o.prototype.getImages = function() {
this.images = [], this.elements.forEach(this.addElementImages, this)
}, o.prototype.addElementImages = function(t) {
"IMG" == t.nodeName && this.addImage(t); this.options.background === !0 && this.addElementBackgroundImages(t);
var e = t.nodeType;
if (e && d[e]) {
for (var i = t.querySelectorAll("img"), n = 0; n < i.length; n++) {
var o = i[n];
this.addImage(o);
}
if ("string" == typeof this.options.background) {
var r = t.querySelectorAll(this.options.background);
for (n = 0; n < r.length; n++) {
var s = r[n];
this.addElementBackgroundImages(s);
}
}
}
};
var d = {
1: !0,
9: !0,
11: !0
};
return o.prototype.addElementBackgroundImages = function(t) {
var e = getComputedStyle(t);
if (e)
for (var i = /url\((['"])?(.*?)\1\)/gi, n = i.exec(e.backgroundImage); null !== n;) {
var o = n && n[2];
o && this.addBackground(o, t), n = i.exec(e.backgroundImage)
}
}, o.prototype.addImage = function(t) {
var e = new r(t);
this.images.push(e)
}, o.prototype.addBackground = function(t, e) {
var i = new s(t, e);
this.images.push(i)
}, o.prototype.check = function() {
function t(t, i, n) {
setTimeout(function() {
e.progress(t, i, n)
})
}
var e = this;
return this.progressedCount = 0, this.hasAnyBroken = !1, this.images.length ? void this.images.forEach(function(e) {
e.once("progress", t), e.check()
}) : void this.complete()
}, o.prototype.progress = function(t, e, i) {
this.progressedCount++, this.hasAnyBroken = this.hasAnyBroken || !t.isLoaded, this.emitEvent("progress", [this, t, e]), this.jqDeferred && this.jqDeferred.notify && this.jqDeferred.notify(this, t), this.progressedCount == this.images.length && this.complete(), this.options.debug && a && a.log("progress: " + i, t, e)
}, o.prototype.complete = function() {
var t = this.hasAnyBroken ? "fail" : "done";
if (this.isComplete = !0, this.emitEvent(t, [this]), this.emitEvent("always", [this]), this.jqDeferred) {
var e = this.hasAnyBroken ? "reject" : "resolve";
this.jqDeferred[e](this)
}
}, r.prototype = Object.create(e.prototype), r.prototype.check = function() {
var t = this.getIsImageComplete();
return t ? void this.confirm(0 !== this.img.naturalWidth, "naturalWidth") : (this.proxyImage = new Image, this.proxyImage.addEventListener("load", this), this.proxyImage.addEventListener("error", this), this.img.addEventListener("load", this), this.img.addEventListener("error", this), void(this.proxyImage.src = this.img.src))
}, r.prototype.getIsImageComplete = function() {
return this.img.complete && void 0 !== this.img.naturalWidth
}, r.prototype.confirm = function(t, e) {
this.isLoaded = t, this.emitEvent("progress", [this, this.img, e])
}, r.prototype.handleEvent = function(t) {
var e = "on" + t.type;
this[e] && this[e](t)
}, r.prototype.onload = function() {
this.confirm(!0, "onload"), this.unbindEvents()
}, r.prototype.onerror = function() {
this.confirm(!1, "onerror"), this.unbindEvents()
}, r.prototype.unbindEvents = function() {
this.proxyImage.removeEventListener("load", this), this.proxyImage.removeEventListener("error", this), this.img.removeEventListener("load", this), this.img.removeEventListener("error", this)
}, s.prototype = Object.create(r.prototype), s.prototype.check = function() {
this.img.addEventListener("load", this), this.img.addEventListener("error", this), this.img.src = this.url;
var t = this.getIsImageComplete();
t && (this.confirm(0 !== this.img.naturalWidth, "naturalWidth"), this.unbindEvents())
}, s.prototype.unbindEvents = function() {
this.img.removeEventListener("load", this), this.img.removeEventListener("error", this)
}, s.prototype.confirm = function(t, e) {
this.isLoaded = t, this.emitEvent("progress", [this, this.element, e])
}, o.makeJQueryPlugin = function(e) {
e = e || t.jQuery, e && (h = e, h.fn.imagesLoaded = function(t, e) {
var i = new o(this, t, e);
return i.jqDeferred.promise(h(this))
})
}, o.makeJQueryPlugin(), o
});
Stylistic warnings in minified third party libraries can safely be ignored.
Minifiers will almost always trim semicolons when they can, while linters will always warn about semicolons missing.
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 having issues with IE8 not appending the elements I want, please see the code below
Coffee
testSite.create_featured_related_product = (modifier) ->
__link = $('<a href="#">')
__img = $('<img src="http://localhost:9000/img/img.png"/>')
__link.append(__img)
$( '.product-relation__group-' + modifier ).prepend (__link)
#
Javascript
testSite.create_featured_related_product = function(modifier) {
var __img, __link;
__link = $('<a href="#">');
__img = $('<img src="http://localhost:9000/img/img.png"/>');
__link.append(__img);
$('.product-relation__group-' + modifier).prepend(__link);
return this;
};
Nothing of the above (<a> and <img>) gets appended to the <div class="group">.
The error I get from the IE8 console is:
'undefined' is null or not an object jquery-with-plugs__0.3.1.js, line 963 character 13
That line seems to be part of jQuery and says
"inprogress" === e && (e = c.shift(), d--), f.cur = e, e && ("fx" === b && c.unshift("inprogress"), delete f.stop, e.call(a, g, f)), !d && f && f.empty.fire()
The error in context:
}), ib.extend({
queue: function (a, c, d) {
var e;
return a ? (c = (c || "fx") + "queue", e = ib._data(a, c), d && (!e || ib.isArray(d) ? e = ib._data(a, c, ib.makeArray(d)) : e.push(d)), e || []) : b
},
dequeue: function (a, b) {
b = b || "fx";
var c = ib.queue(a, b),
d = c.length,
e = c.shift(),
f = ib._queueHooks(a, b),
g = function () {
ib.dequeue(a, b)
};
"inprogress" === e && (e = c.shift(), d--), f.cur = e, e && ("fx" === b && c.unshift("inprogress"), delete f.stop, e.call(a, g, f)), !d && f && f.empty.fire()
},
_queueHooks: function (a, b) {
var c = b + "queueHooks";
return ib._data(a, c) || ib._data(a, c, {
empty: ib.Callbacks("once memory").add(function () {
ib._removeData(a, b + "queue"), ib._removeData(a, c)
})
})
}
Any ideas?
EDIT: Simplified the code
The issue was IE8's handling of appending. Not the jQuery error.
I am using the jQuery tools navigator on my page. Below is the example from their site;
http://flowplayer.org/tools/scrollable/navigator.html
While I am able to get it working on one place, I need to use the Navigator in 2 places within the same HTML (one # top AND another # bottom of page)
But it is not working correctly...My question is what do I need to update to get the plugin working in 2 places?
Just to give an idea, the JS seems to be using "scrollable" name...But I am not sure how it works as the writing style of the code is a bit complex to me.
And I call following on document ready
$("#browsable").scrollable().navigator();
Below is the HTML code structure;
<div class="fl LeftCol"><a class="prev browse left disabled"></a></div>
<div class="fl MidCol">
<div class="scrollable" id="browsable">
<div class="items">
<!-- Item 1 start-->
<div>
</div>
<!-- Item 1 end -->
<!-- Item 2 start -->
<div>
</div>
<!-- Item 2 end -->
</div> <!-- End items -->
</div> <!-- End browsable -->
</div> <!-- End MidCol -->
<div class="fl RightCol"><a class="next browse right"></a></div>
<div class="fl navi"><a class="active"></a><a class=""></a></div>
And the JS (beatified)
/*!
* jQuery Tools v1.2.6 - The missing UI library for the Web
*
* scrollable/scrollable.js
* scrollable/scrollable.navigator.js
*
* NO COPYRIGHTS OR LICENSES. DO WHAT YOU LIKE.
*
* http://flowplayer.org/tools/
*
*/
(function (a) {
a.tools = a.tools || {
version: "v1.2.6"
}, a.tools.scrollable = {
conf: {
activeClass: "active",
circular: !1,
clonedClass: "cloned",
disabledClass: "disabled",
easing: "swing",
initialIndex: 0,
item: "> *",
items: ".items",
keyboard: !0,
mousewheel: !1,
next: ".next",
prev: ".prev",
size: 1,
speed: 400,
vertical: !1,
touch: !0,
wheelSpeed: 0
}
};
function b(a, b) {
var c = parseInt(a.css(b), 10);
if (c) return c;
var d = a[0].currentStyle;
return d && d.width && parseInt(d.width, 10)
}
function c(b, c) {
var d = a(c);
return d.length < 2 ? d : b.parent().find(c)
}
var d;
function e(b, e) {
var f = this,
g = b.add(f),
h = b.children(),
i = 0,
j = e.vertical;
d || (d = f), h.length > 1 && (h = a(e.items, b)), e.size > 1 && (e.circular = !1), a.extend(f, {
getConf: function () {
return e
},
getIndex: function () {
return i
},
getSize: function () {
return f.getItems().size()
},
getNaviButtons: function () {
return n.add(o)
},
getRoot: function () {
return b
},
getItemWrap: function () {
return h
},
getItems: function () {
return h.find(e.item).not("." + e.clonedClass)
},
move: function (a, b) {
return f.seekTo(i + a, b)
},
next: function (a) {
return f.move(e.size, a)
},
prev: function (a) {
return f.move(-e.size, a)
},
begin: function (a) {
return f.seekTo(0, a)
},
end: function (a) {
return f.seekTo(f.getSize() - 1, a)
},
focus: function () {
d = f;
return f
},
addItem: function (b) {
b = a(b), e.circular ? (h.children().last().before(b), h.children().first().replaceWith(b.clone().addClass(e.clonedClass))) : (h.append(b), o.removeClass("disabled")), g.trigger("onAddItem", [b]);
return f
},
seekTo: function (b, c, k) {
b.jquery || (b *= 1);
if (e.circular && b === 0 && i == -1 && c !== 0) return f;
if (!e.circular && b < 0 || b > f.getSize() || b < -1) return f;
var l = b;
b.jquery ? b = f.getItems().index(b) : l = f.getItems().eq(b);
var m = a.Event("onBeforeSeek");
if (!k) {
g.trigger(m, [b, c]);
if (m.isDefaultPrevented() || !l.length) return f
}
var n = j ? {
top: -l.position().top
} : {
left: -l.position().left
};
i = b, d = f, c === undefined && (c = e.speed), h.animate(n, c, e.easing, k ||
function () {
g.trigger("onSeek", [b])
});
return f
}
}), a.each(["onBeforeSeek", "onSeek", "onAddItem"], function (b, c) {
a.isFunction(e[c]) && a(f).bind(c, e[c]), f[c] = function (b) {
b && a(f).bind(c, b);
return f
}
});
if (e.circular) {
var k = f.getItems().slice(-1).clone().prependTo(h),
l = f.getItems().eq(1).clone().appendTo(h);
k.add(l).addClass(e.clonedClass), f.onBeforeSeek(function (a, b, c) {
if (!a.isDefaultPrevented()) {
if (b == -1) {
f.seekTo(k, c, function () {
f.end(0)
});
return a.preventDefault()
}
b == f.getSize() && f.seekTo(l, c, function () {
f.begin(0)
})
}
});
var m = b.parents().add(b).filter(function () {
if (a(this).css("display") === "none") return !0
});
m.length ? (m.show(), f.seekTo(0, 0, function () {}), m.hide()) : f.seekTo(0, 0, function () {})
}
var n = c(b, e.prev).click(function (a) {
a.stopPropagation(), f.prev()
}),
o = c(b, e.next).click(function (a) {
a.stopPropagation(), f.next()
});
e.circular || (f.onBeforeSeek(function (a, b) {
setTimeout(function () {
a.isDefaultPrevented() || (n.toggleClass(e.disabledClass, b <= 0), o.toggleClass(e.disabledClass, b >= f.getSize() - 1))
}, 1)
}), e.initialIndex || n.addClass(e.disabledClass)), f.getSize() < 2 && n.add(o).addClass(e.disabledClass), e.mousewheel && a.fn.mousewheel && b.mousewheel(function (a, b) {
if (e.mousewheel) {
f.move(b < 0 ? 1 : -1, e.wheelSpeed || 50);
return !1
}
});
if (e.touch) {
var p = {};
h[0].ontouchstart = function (a) {
var b = a.touches[0];
p.x = b.clientX, p.y = b.clientY
}, h[0].ontouchmove = function (a) {
if (a.touches.length == 1 && !h.is(":animated")) {
var b = a.touches[0],
c = p.x - b.clientX,
d = p.y - b.clientY;
f[j && d > 0 || !j && c > 0 ? "next" : "prev"](), a.preventDefault()
}
}
}
e.keyboard && a(document).bind("keydown.scrollable", function (b) {
if (!(!e.keyboard || b.altKey || b.ctrlKey || b.metaKey || a(b.target).is(":input"))) {
if (e.keyboard != "static" && d != f) return;
var c = b.keyCode;
if (j && (c == 38 || c == 40)) {
f.move(c == 38 ? -1 : 1);
return b.preventDefault()
}
if (!j && (c == 37 || c == 39)) {
f.move(c == 37 ? -1 : 1);
return b.preventDefault()
}
}
}), e.initialIndex && f.seekTo(e.initialIndex, 0, function () {})
}
a.fn.scrollable = function (b) {
var c = this.data("scrollable");
if (c) return c;
b = a.extend({}, a.tools.scrollable.conf, b), this.each(function () {
c = new e(a(this), b), a(this).data("scrollable", c)
});
return b.api ? c : this
}
})(jQuery);
(function (a) {
var b = a.tools.scrollable;
b.navigator = {
conf: {
navi: ".navi",
naviItem: null,
activeClass: "active",
indexed: !1,
idPrefix: null,
history: !1
}
};
function c(b, c) {
var d = a(c);
return d.length < 2 ? d : b.parent().find(c)
}
a.fn.navigator = function (d) {
typeof d == "string" && (d = {
navi: d
}), d = a.extend({}, b.navigator.conf, d);
var e;
this.each(function () {
var b = a(this).data("scrollable"),
f = d.navi.jquery ? d.navi : c(b.getRoot(), d.navi),
g = b.getNaviButtons(),
h = d.activeClass,
i = d.history && history.pushState,
j = b.getConf().size;
b && (e = b), b.getNaviButtons = function () {
return g.add(f)
}, i && (history.pushState({
i: 0
}), a(window).bind("popstate", function (a) {
var c = a.originalEvent.state;
c && b.seekTo(c.i)
}));
function k(a, c, d) {
b.seekTo(c), d.preventDefault(), i && history.pushState({
i: c
})
}
function l() {
return f.find(d.naviItem || "> *")
}
function m(b) {
var c = a("<" + (d.naviItem || "a") + "/>").click(function (c) {
k(a(this), b, c)
});
b === 0 && c.addClass(h), d.indexed && c.text(b + 1), d.idPrefix && c.attr("id", d.idPrefix + b);
return c.appendTo(f)
}
l().length ? l().each(function (b) {
a(this).click(function (c) {
k(a(this), b, c)
})
}) : a.each(b.getItems(), function (a) {
a % j == 0 && m(a)
}), b.onBeforeSeek(function (a, b) {
setTimeout(function () {
if (!a.isDefaultPrevented()) {
var c = b / j,
d = l().eq(c);
d.length && l().removeClass(h).eq(c).addClass(h)
}
}, 1)
}), b.onAddItem(function (a, c) {
var d = b.getItems().index(c);
d % j == 0 && m(d)
})
});
return d.api ? e : this
}
})(jQuery);
do not use the same id value more than one time on the page
if you can't set different id or class to the top and bottom menu and navigation control then i guess you can try this one
$(".scrollable:eq(0)").scrollable().navigator(".navi:eq(0)");
$(".scrollable:eq(1)").scrollable().navigator(".navi:eq(1)");