I am trying to block gif's from loading, specifically animated gifs, but if that is not possible, then all gif's. The point is to reduce bandwidth. I am able to remove elements using .remove() and jQuery, but this still means they load. Is there a way to block the specific requests for the gifs so that they do not even load in the first place?
Edit: I am talking about making a Google Chrome extension
You will run into timing issues. If you use a content script you can remove those dom elements but since your extension activates when the page is fully loaded and ready, by then probably chrome already loaded them.
Small animated gifs dont consume much bandwith unless youre talking about the recent trend of making short videos with gifs. For those large ones you might prevent some frames from loading.
Related
I need to cycle automatically through several webpages using Chrome. There are Chrome extensions which will cycle tabs like this, but I wonder if iframes and setInterval could work too.
I want to keep each page open once I've loaded it, i.e. I would need to make many iframes and show/hide them, rather than reload on each change by setting the src on a single iframe.
Bearing in mind that the end result needs to be run for long periods of time, are there significant advantages or disadvantages to using multiple iframes instead of tabs?
I'm working in chrome to improve page load times.
I'm trying to determine the cause of the delay between when the content is finished downloading and the onload event fires. You can see from the image that the content finishes downloading at about 160ms, but the load event doesn't fire until about 600ms.
My question, how can I identify and break down what is taking 450ms to happen? Is it possible to improve the load time here, or is this just an inevitable part of the rendering/painting process?
UPDATE #1
Solved the problem, the culprit was mainly jQuery; page is now loading at the 300ms section. I decided to defer the loading of jQuery (and every other site script until after the window.onload event fired. This closed the gap and now all of the page scripts load after the onload happens.
Here's the timeline view that shows the script loading:
The the Chrome Dev tools you have the Timeline tab, press record, refresh the page and stop the recording you'll get all you need.
Also be sure the check the check boxes you're interested in. Documentation here
I've tested some other pages and they have a similar gap to yours and i think that's the painting and rendering time.
If you really care that much about those 450 ms i suggest you read this article about the way chrome renders the DOM it's pretty good one.
My personal opinion though is that this sounds like premature optimization if you don't plan on rendering a few thousand or tens of thousands of elements you should just let it be or try to optimize some other parts, preferably the JavaScript.
I still suggest reading the article it's pretty good.
Is it possible to find out when a page of an EPUB Fixed Layout is being viewed with Javascript?
There is the DOMContentLoaded event, but the adjacent pages also fire this event when they are preloaded in iBooks, causing animations or sounds to start before the page being visible...
No, it's not.
This is a "feature" of iBooks. It preloads the pages, I suppose to make page turns faster later on. Unfortunately, there is no way to detect that a page is preloading as opposed to being actually viewed.
There's only one way to deal with this--force user interaction on each page (tapping something) to start the animations or sounds. You may even need to structure your JS so that the JS itself is not loaded until the user interaction occurs. Videos won't start playing without user interaction anyway.
I've seen a few tutorials on how to create a JavaScript preloader for images. Is it possible to use a JavaScript preloader for other JavaScript?
My website uses mootools (and others too) for animations and a copious amount of pictures, etc -- therefore it takes awhile to load. Is it possible for the website to have a "loading" centered in the page -- and nothing more -- until all the Javascript libraries load, all the images load, etc. The website has around 300k of JavaScript (compressed), 800k of images on the front page.
In pure flash design, it's possible to have the flash movie simply say loading before any of the associated libraries, other code, images, download and appear. Can this be done in JavaScript?
Execute all your code on window.onload()
Here's a ridiculously simple example to give you the basic idea: http://jsfiddle.net/kennis/jHJ3T/1/
Think of the hideous red div as your preloader. Once the document loads all the resources (images, js files, whatever), the preloader disappears and your content is now visible and your javascript libraries have been fully loaded and are ready to execute.
If you want run the jsfiddle example more than once, change the "random" values at the end of the image tags so your browser doesn't pull cached versions.
On a lot of the pages I work with there are a lot of external(non-critical) external images and js files that get called that affect the load time. One of these is a tracking pixel for an ad company that sometimes can take a few seconds to load and you can see this hanging in the browser so it gives a poor user experience. Is there a way that I can load these and not have them count as the initial page load? I've seen similar things that launch a timer and once the timer fires they load but I'm worried that if the user leaves the page too quickly the tracking pixel wont have time to load.
Not really - the point of tracking using a gif is to track users regardless of whether they have javascript or not. Delaying the load of the gif would require javascript, so would defeat the point and potentially mess up your stats.
The best method is to put these 'unnecessary for page load' things at the end of the code, inside the closing body tag.
If you can load the tracking pixel further down on the webpage, preferably as close to the end BODY tag as possible, it will likely process all other content prior to that image first, making the page load appear to occur faster in the event the image isn't loading very fast.
This can be explained (if taken slightly out of context) by Yahoo YSlow's "Best Practices for Speeding up your Website" section on put scripts at the bottom.