I'm using pace.js on my site and I'm having difficulties with pages that have iframes. Is there a way to make it so that pace.js takes into account the content loading inside of those iframes?
I've tried setting the paceOptions to wait for the iframe selector to load before deciding that the page has fully loaded, but it seems to just recognize that an iframe is on the page, but not that the content inside has been rendered.
This is what I currently have:
<script>
paceOptions = {
elements: {
selectors: ['iframe']
}
}
</script>
<script src="include/pace/pace.min.js"></script>
You can add class or id to your iframe and use those in your pace initalizer.
pace-options = { elements: {
selectors: [".class1", "#id1", ".class2"]
}
}
I've had this same issue with iframes. Especially when you want two or more frames to play live video feeds simultaneously.
I haven't come up with a proper solution, but I've been toying around with the idea of letting the whole page load with the iframes autoplay set to false, and then having a separate script start both of them as simultaneous as possible.
If it's a live video feed, I don't know if there are time stamps or not, or if it would be possible to pull the timestamps and have the two separate frames sync up like that. Just food for thought.
My problem has been, even if I get the frames to start together, network latency, etc causes the two separate live feeds to get off kilter.
Related
I have a web page which has a lot of images on it. The majority of these images are within a slider, using SlickSlider.js with Lazyload.
The page has a load time of 3.87s seconds but has over 134 requests being made. Looking at the requests, they all seem to be the images i have in the slider.
Is it normal for a request to be made even though they haven't been loaded? As soon as i click the arrow on the slider it loads into the DOM again?
Link to site:
http://bluemoontesting.co.uk/susatchwell/projects/restoration-modernisation-classic-cotswold-manor-house/
You need to put the attribute data-lazy="your-image-url" inside all your image tags and leave off the src.
I saw you're also using the srcset attribute, so you have to read this too if you don't want several http requests.
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.
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.
Sometimes the HTML video on the topmost portion of my site doesn't run when user is visiting the site for the first time. This is due to the movie being loaded long after the other images files on the page have been downloaded. Until that point the request for the resource is not being sent as I can see through firebug's net extension.
Since the video is on the top of other images I want it to be downloaded first & quicker. In my HTML code as well, video is placed before the other images so why is the downloading of movie blocked for such long times ?
How should I fix this to make the movie load faster?
The movie size(of .mp4 version) is around 600Kb for 30 seconds.
I can see two possible solutions to your problem:
a) Use CSS background-image on an inline-block DIV instead of <img> elements. Background loading is run on lower priority thread(s) on almost all browsers. This way your video loading is very likely to get more priority.
b) In your <img> tags, do not specify the src attribute. Instead specify the image source in another attribute, say isrc. In your domReady callback, copy the isrc attribute to src for all images. i.e. something like:
$(document).ready(function() {
$('img').each(function() {
if($(this).attr('isrc')) {
$(this).attr('src', $(this).attr('isrc'));
}
});
});
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.