In the preloadjs docs, I see this referred to but I can't tell what it means and there's no definition.
Creating a Queue
To use LoadQueue, create a LoadQueue instance. If you want to force tag
loading where possible, set the preferXHR argument to false.
I know what XHR is, but I don't know what "tag loading" means in this context, or what it means in terms of how the library will operate.
Tag loading uses HTML tags to load content.
For example, this is a tag loaded image:
var img = document.createElement("img");
img.src = "path/to/image.jpg";
Most content can be loaded using tags. The main exceptions are anything text-based and webaudio.
Tag-loaded images are handled by the browser, and download to the browser cache. They don't provide things like progress events, which is why PreloadJS prefers to load with XHR. That said, tag-loading works better with the browser cache, so if you plan on using string-paths with your content (and not passing references to preloaded content), stick with tag-loaded images :)
Related
I have a bigger webpage and it would take days to add the loading=lazy attribute to all img tags on my site. Is it useful to use something like $('img'). attr('loading', 'lazy') (does this work?) to the site, or will it just make the site more slower?
It doesn‘t necessarly have the expected effect - if you‘re adding the attributes via JavaScript, the page itself has already been parsed by the browser and their preloading scripts as well and all of those images would be been put to the download queue, as if the attribute wouldn‘t have existed on them.
So I would heavily recommend to add those attributes within the source code itself already.
Lets say my blog is http://foo.tumblr.com.
All the post's images are stored in xx.media.tumblr... (for example: https://24.media.tumblr.com/tumblr_kzjlfiTnfe1qz4rgho1_250.jpg) (first 2 numbers can be skipped)
But i want the URL of the image be in the same domain of my blog, and looks something like this:
http://foo.tumblr.com/tumblr_kzjlfiTnfe1qz4rgho1_250.jpg
(that doesn't exist)
Why i need that? I am creating a script, and it generates a canvas that detects if the image have transparency with a getImageData (all the .jpg are skipped), but since the subdomain is different, i get a cross-domain security error, and the canvas is tainted, avoiding the use of getImageData.
So.. how can i do that?
I think Tumblr API could be useful, but how?
Scrape your sitemap for all posts and get their images. You could use the API or just with Javascript in the browser console:
xmlin = prompt(); // view-source:biochemistri.es/sitemap1.xml
parser = new DOMParser();
xmlDoc=parser.parseFromString(xmlin,"text/xml");
xmlDoc.querySelectorAll('loc')[0].remove();
posts = xmlDoc.querySelectorAll('loc');
postlist = [];
for (i=0;i<posts.length;i++) {postlist.push(posts[i].innerHTML)};
...to generate an array containing all posts, which can be navigated through for photo posts (div.post.photo) and their URLs copied.
Then simply generate a new list of images with a for loop and newImg = document.createElement('img'), setting an origin attribute using newImg.setAttribute('origin') = myPhotoList[n] which can then be used to select an image programmatically:
document.querySelector("img[origin='"+{PhotoURL-HighRes}+"']"
(or {PhotoURL-1280}, {PhotoURL-500}, {PhotoURL-250} etc. Once retrieved over an XMLHttpRequest, you could simply switch the post in the DOM. The {PhotoURL-HighRes} in my example above wouldn't work, it'd be an attribute from the page I'm just indicating which part you'd want to get from the theme HTML.
As explained in this post, there is a variable which could be used as a more concise attribute than the full origin URL if you want to be a bit more specific with regular expressions.
This would effectively put all of your images onto your local URL, with URLs like foo.tumblr.com/images/tumblr_kzjlfiTnfe1qz4rgho1_250.jpg, and avoid cross-domain restrictions. I'm guessing it'd work only if you don't have a ton of posts as custom pages such as you'd be using to store images do have a restriction on their size (though I suppose you could make a second one).
Also might be sensible to include CSS to set display: none in case anyone stumbles upon the page by accident, and a redirect function to the homepage with window.onload or similar.
I want to invoke a procedure in one page and use it in another page, and the response is only used by the next page, so I think JsonStore is not suit for that. Should I define a global var?
Is there any code sample to do such things? Thanks for your help.
I presume by pages you mean different HTML files. If so, that is not recommended, Worklight is intended for single page applications. There are no code samples that show how to do that.
I would recommended having a single HTML page and using something like jQuery.load to inject new HTML / DOM elements. By dynamically injecting new HTML your single/main HTML file shouldn't be too big and you can destroy (i.e. remove from memory / the DOM) unused DOM elements. Searching on Google for page fragments and html templates could help you find examples. The idea is that you don't lose the JavaScript context.
Maybe you can get away with doing a new init to re-initialize JSONStore (it won't delete any the data, just give you access) on every new HTML page and use get to get access to the JSONStore collections to perform operations such as find.
I have a var in background page (for example var x = 23). How I can get this variable in my content script? I tried this in content.js:
chrome.extension.getBackgroundPage().x;
But it doesn't work.
Send your data with messages, and listen on the receiving side.
Messages
Since content scripts run in the context of a web page and not the extension, they often need some way of communicating with the rest of the extension. For example, an RSS reader extension might use content scripts to detect the presence of an RSS feed on a page, then notify the background page in order to display a page action icon for that page.
You can not use chrome.extension.getBackgroundPage() in content scripts, it is not supported, as an alternative use epoch answer for message communication.
References:
Support for Content Scripts
I need to find a way to write a program (in any language) that will connect to a website and read dynamically generated data from the website.
Note that it's dynamically generated--it's not enough to get the source html, because the data I'm interested in is generated via javascript that references back-end code. So when i view the webpage source, I can't see the data. (For example, go to google, and do a search. Check the source code on the search results page. Very little of the data your browser is displaying is reflected in the source--most of it is dynamically generated. I need some way to access this data.)
Pick a language and environment that includes an HTML renderer (e.g. .NET and the WebBrowser control). Use the HTML renderer to get the URL and produce an HTML DOM in memory (making sure that scripting is enabled). Read the contents of the HTML DOM after the renderer has done its work.
Example (you'll need to do this inside a System.Windows.Form derived class):
WebBrowser browser = new WebBrowser();
browser.Navigate("http://www.google.com");
HtmlDocument document = browser.Document;
// extract what you want from the document
I used to have a Perl program to access Mapguide.com to get the drive direction from one location to another location. I parsed the returned page and save to database. If the source never change their format, it is OK. the problem is the source format often change, your parser also need change.
A simple thought: if we're talking about AJAX, you can rather look up the urls for the dynamic data. Then you can use the javascript on the page you're talking about to reformat this.
If you have Firefox/greasemonkey making a DOM dumper should be a simple matter.