Raw Source Toggle Dropdown

• Minified Source

aiwts / HKGalden - Autoload images

// ==UserScript==
// @name			HKGalden - Autoload images
// @namespace		galdenson
// @version			1.1
// @description		Disable Lazyload and block long images
// @match			https://hkgalden.com/view*
// @match			http://hkgalden.com/view*
// @grant			GM_getValue
// @grant			GM_setValue
// @updateURL		https://openuserjs.org/install/aiwts/HKGalden_-_Autoload_images.user.js
// @downloadURL		https://openuserjs.org/install/aiwts/HKGalden_-_Autoload_images.user.js
// @run-at document-start
// ==/UserScript==

/* 1.1 update log
 * hover to view image and impose quoted image height limit
*/

var handlingMode = '	var handleLongImage = "' + GM_getValue("handlingMode", "Blocked") + '";\n';

document.addEventListener('readystatechange', function(evt) {
	var modes = ["Resized", "Blocked"];
	var ind = (GM_getValue("handlingMode", "Blocked") == "Blocked") ? 1 : 0;
	if (document.readyState == "interactive") {
		var a = document.createElement('a');
		a.id = "handlingMode";
		a.href = "javascript: void(0);";
		a.innerHTML = GM_getValue("handlingMode", "Blocked");
		a.addEventListener("click", function (evt) {ind = (++ind)%2; this.innerHTML = modes[ind]; GM_setValue("handlingMode", modes[ind]);}, false);
		var actp = document.getElementsByClassName("actp")[0];
		actp.insertBefore(a, actp.childNodes[1]);
	}
}, false);

var pageHead = document.querySelector("head");
var script = document.createElement('script');
script.type = "text/javascript";

function toBeInject() {
	// default limits
	var topicImageLimit = 400, quoteLimit = 400, globalLimit = 2000;

   	// isReadyMethodModified
	var modified = false;

	// isMaxHeightAttrAdded
	var attrAdded = false;
    
    // hoverOff boolean
    var hoverOff = true;
    
    // used but not declare...
    var curpg;

	function getPageNo() {
		var ret = 1;
		var href = location.href;
		if (href.indexOf("page/") != -1) {
			ret = href.substring(href.indexOf("page/"));
			ret = parseInt(ret.substring(ret.indexOf("/")+1));
		}
		return ret;
	}

    function processBlockImage(img) {
        if (handleLongImage == "Blocked") {
            img.removeAttr("src").after("<b>Too long didn't show. Mouseover to view image.</b>");
        } else {
            img.next().remove(); // remove b tag
            img.attr("src", img.parent().attr("href")).attr("style", "max-height: 200px;");
        }
    }
    
	function processBlockImages() {
		if (handleLongImage == "Blocked") {
			handleLongImage = "Resized";
		} else {
			handleLongImage = "Blocked";
		}
		$("img[blocked]").each(function() {
            processBlockImage($(this));
            /*
			var img = $(this);
			if (handleLongImage == "Blocked") {
				img.removeAttr("src");
//				img.removeAttr("style");
				img.after("<b>Too long didn't show. Click to view image.</b>");
			} else {
				img.next().remove(); // remove b tag
				img.attr("src", img.parent().attr("href"));
				img.attr("style", "max-height: 200px;");
//				img.attr("style", "width:" + Math.round(200/parseInt(this.naturalHeight)*100) + "%");
			}
            */
		});
	}

	function modifyReadyMethod() {
		if ((typeof jQuery != "undefined")&&(!modified)) {
			modified = true;
			var originalReadyMethod = jQuery.fn.ready;

			// modifying lazyload directly failed for some reason (it seems lazyload is defined more than once)
			jQuery.fn.ready = function(fn) {
				jQuery.fn.lazyload = function(a) {
					if ((!attrAdded) || ((curpg) && (curpg > attrAdded))) {
						this.each(function(key, value) {
							$(value).attr("maxHeight", globalLimit);
						});
						
						if (getPageNo() > 1) {
							$("section[data-type='topic'] .ctn img").each(function(key, value) {
								$(value).attr("maxHeight", topicImageLimit);
							});
						}
                        
                        $("blockquote img").each(function(key, value) {
                            $(value).attr("maxHeight", quoteLimit);
                        });
						attrAdded = curpg || getPageNo();
					}

					this.each(function(key, value) {
						var im = $(value);

						// create a new image img to check natural height
						var img = document.createElement("img");
						img.src = im.attr("data-original");
						(function ($) {
							img.addEventListener("load", function(evt) {
								if (parseInt(this.naturalHeight) > parseInt($.attr("maxHeight"))) {
									$.attr("blocked", "blocked");
                                    processBlockImage($);
                                    /*
									if (handleLongImage == "Blocked") {
										$.removeAttr("src");
										$.after("<b>Too long didn't show. Click to view image.</b>");
									} else {
										$.attr("src", $.attr("data-original"));
										$.attr("style", "max-height: 200px;");
//										$.attr("style", "width:" + Math.round(200/parseInt(this.naturalHeight)*100) + "%");
									}
                                    */
                                    // hover fire twice for some reason (due to child node removed?). Ensure hover has been off before another hover on handler executes)
                                    $.parent().hover(function (evt) {
                                        if (hoverOff) {
                                            var a = jQuery(this);
                                            var child = a.children("b").length ? a.children("b") : a.children("img");
                                            a.css("display", "inline-block").css("width", child.width() + "px").children("img").attr("src", this.href).attr("style", "position: absolute;").next().remove();
                                            a.css("height", a.children("img").height());
                                        }
                                        hoverOff = false;
                                    }, function () {
                                        hoverOff = true;
                                        processBlockImage(jQuery(this).removeAttr("style").children("img"));
                                    });
								} else {
									$.attr("src", $.attr("data-original"));
								}
							}, false);
						})(im);
					});
					return this;
				};

				originalReadyMethod(fn);
			};
		}
	}
	document.addEventListener("DOMSubtreeModified", modifyReadyMethod, false);
	document.addEventListener("DOMContentLoaded", function () {$("#handlingMode").click(processBlockImages);}, false);
}
var txtScr = toBeInject.toString();
txtScr = txtScr.substring(txtScr.indexOf("{")+1, txtScr.lastIndexOf("}"));
script.appendChild(document.createTextNode(handlingMode + txtScr));

pageHead.appendChild(script);