I have a simple 250k flash movie a page i'm developing. The flash movie causes scrolling, javascript animations, and overall performance to be slow.
Here's the code
<object type="application/x-shockwave-flash"
data="/media/slider.swf"
width="520" height="348">
<param name="autoplay" value="true">
<param name="movie" value="/media/slider.swf" />
<param name="quality" value="high"/>
</object>
The page performs normally on every other browser and OS pare i've tried it on. I've heard that the Chromes flash player on mac causes crashing and performance isn't great, but i'm having trouble finding a fix.
Any one having any success with this?
EDIT
Here's a sample page I put up real quick with the error. If you resize your browser and have the blue block visible with and without the flash, then hover you should see the error.
http://dev.danielcgold.com/flash/
I have tested your code and overall performance is not so bad, though scrolling is slow, indeed. :( Setting wmode param to opaque gives some improve, pastebin.com/FfQLjVbg, but also I suggest to decrease fps to 10 and review animaitons in your swf clip.
Related
I've had a scan through previous questions and can't seem to find anything about adding a YouTube video to a page and having it auto play without effecting page load speeds. Is there anyway to allow the full content of the page to carry on loading without the Video creating a bottle neck situation?
It will depend on the device and browser but on a laptop, using the HTML5 video mechanism your page will continue to load while the video starts on most OS's and browsers, without you having to do any complicated ordering.
The video is streamed, which in practice means small chunks are requested at a time, so there is no delay waiting for the full video to download. Most browsers will implement this playback in a way that does not interfere with the rest of the page download and display - e.g. in a separate thread, and even sometimes mostly in the device HW itself.
On a mobile device things are different - many mobile devices will not allow autoplay at all. They implement this restriction protect to the user from incurring excessive charges on mobile data plans.
Many mobile deices will also force the video to play full screen when it does play - this tends to be on a device by device basis. For example iPhones play videos full screen but larger iPad's will allow it inline in the web page (this is an ever changing playing field so its worth checking the status with the latest release if you are interested in a particular device).
Searching around on line I came across this little bit of javascript, and an amend to the YouTube embed code which helped.
<iframe width="854" height="480" src="" data-src="https://www.youtube.com/embed/ihhAswAsg8c?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
Notice how the src="" is empty and the url has been put inside a data-src="" instead. Then add the following javascript.
$(document).ready(function() {
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
}
}
}
window.onload = init;
});
This will then stop the iframe from automatically making lots of http requests until the rest of the page has finished loading.
I've been trying to implement the new srcset approach to responsive images, using the following HTML
<img class="swapImages"
srcset="assets/images/content/large.jpg 1200w,
assets/images/content/medium.jpg 800w,
assets/images/content/small.jpg 400w"
sizes="100vw"
src="assets/images/content/small.jpg"
alt="responsive image">
Im using chrome 40 and all I get is the largest image, resizing my browser, clearing the cache does nothing.
I read somewhere I had to polyfill, so I used the picturefill plugin, although chrome should support it.....still doesn't work.
I put together a demo page for it:
http://www.darrencousins.com/lab/resp-img-srcset/
What am I doing wrong/not getting?
Any help is massively appreciated.
You have it correct.
The thing is, that once your browser has the higher resolution picture (loaded, in cache), there is no point for it to download lower quality one, even when you make your window smaller (the point of this is to save traffic).
So if you want to test this, just make your window smaller and THEN load the page (after clearing the cache / or use incognito mode). You will get the mobile or tablet version. Then by making the window bigger, you'll at some point see your browser switching to higher resolution picture.
Update 2022; Simply use Ctrl + Shift + R shortcut (for Mac: Cmd + Shift + R) after resize, instead of clearing cache, so that the browser will reload, and ignore cache for current tab till done (In other words, full-reload without losing entire cache).
When used in an img tag, the srcset attribute leaves the decisions up to the browser in terms of which image to load as mentioned by TondaCZE. If you want to force browsers to load images at specified viewports, you want to use the picture element.
<picture>
<source srcset="large.jpg" media="(min-width: 1200px)" />
<source srcset="medium.jpg" media="(min-width: 800px)" />
<img src="small.jpg" />
</picture>
I have just noticed that your demo page (http://www.darrencousins.com/lab/resp-img-srcset/) was never displaying the mobile version (even when resizing the browser or using the DevTools - Device mode) on Google Chrome (version 48).
Changing the device pixel ratio to 1 seems to load the correct image.
I don't know why, I am wondering if the w descriptors take the device pixels ratio into consideration
We faced the same issue while working with srcsets for the first time in our project. After investing some time, one of our team members was finally able to crack the issue.
The reason why your code doesn't work is because of the mismatch of the sizes in srcset and sizes attribute. You have to provide double the width in the srcset for the browser to be able to match it with the width in sizes.
For example,
<img
srcSet="image1920w.png 1920w,image720w.png 720w"
sizes="(min-width: 960px) 960px,
360px"
src="www.image1920w.com"
alt="Sample"
/>
Here's a sample working code for you to try out.
Make sure you open it in incognito (since once the browser loads higher resolution image, it will not go back lower resolution image) and run the code first in browser size less than 1920px to see the smaller resolution image(sunset) and once you start increasing the browser size, you will be able to see the larger image (flower).
I guess you are testing on chrome browser, and the only reason its not working there is because its a chrome feature. See below stack overflow thread (it holds good for latest version of chrome v54 as well):
Google Chrome version 40 srcset attribute problems
Checked your page on IE8 and Firefoxv49 and things work like a charm!
The other thing I observed is that though chrome doesn't download other images, it resizes the one downloaded pretty well. So, in a way we are still in a much better condition had it only been this on page:
<img srcset="assets/images/content/large.jpg 1200w" alt="large image">
For anyone using Chrome DevTools sidebar, you can tell Chrome to disable the cache when DevTools is open. Changing your viewport and refreshing will then serve the correct responsive image if it's giving you the largest (cached) image all the time.
Open DevTools (F12)
Go to Settings
Scroll down to Network
Check Disable cache (while DevTools is open)
Have you tried to change DPR to 1.0? You can find it in the top bar of Chrome DevTools in responsive mode (try 380px width). After changing DPR, right-click on the reload page icon, then select "Empty cache and hard reload" best to do that in incognito mode. The browser should preload a 400w image.
It's work based on device pixel ratio (DPR). For example, say we have a device that has a viewport width of 412 px and a DPR of 2.6. So the browser chooses an image close to 803 px (412 _ .75 _ 2.6).
If You want to choose the image based on the viewport only, try using media attribute like this:
<amp-img
alt="grey cat"
media="(max-width: 469px)"
width="226"
height="340"
src="/static/inline-examples/images/cat-small.jpg">
</amp-img>
<amp-img
alt="grey cat"
media="(min-width: 470px) and (max-width: 669px)"
width="450"
height="340"
src="/static/inline-examples/images/cat-medium.jpg">
</amp-img>
<amp-img
alt="grey cat"
media="(min-width: 670px)"
width="650"
height="340"
src="/static/inline-examples/images/cat-large.jpg">
</amp-img>
In my case, the problem was a space in the webp image name. I renamed the file to remove the space character, and it worked!
<picture>
<source srcset="img/landing-small.webp" type="image/webp">
<source srcset="img/landing - small.jpg" type="image/jpeg">
<img src="img/landing - small.jpg" alt=""/>
</picture>
Open your development tool, then go to network tab and disable catch. That's all, nothing else.
I'm coding an app around video content and am currently playing around with HTML5's fullscreen API (I know it is still in very early stage).
Because of what my application does, the video itself isn't the only part that goes fullscreen: several elements alongside go fullscreen too, and I have noticed a great drop in performance there. The video streams ok, but other graphical elements suddenly get painfully slow. For example, a hover style typically takes about a good half second before showing up. A simple change in subtitles (I use popcorn.js) causes the video to freeze for a fraction of a second.
Any one knows why this is so? Do you experience the same? Thanks for your precious feedback.
I'm working on a site with lots of CSS3 transitions (which are hardware accelerated) and high memory objects (for example, an array of 39 objects, each containing the full html source for a typical online news article) and I'm noticing some very choppy/jittery scrolling, which I've been unable to debug.
I've kept these high memory objects out of the DOM, which should prevent them from affecting DOM performance, however, I can't help but think that they are still having a negative effect. I don't have code samples to post because I'm unsure of whether this is even an issue.
Please go to this site (Orange) and click on an article tile. In the reader div that pops up over the page, try scrolling as you normally would. Does it feel choppy/jittery? Do you have any suggestions on how to improve this?
CSS3 transitions, opacity, text and box-shadows and the like are certainly known to impact rendering speeds. In fact, even sites with heavy use of text-shadow alone can cause choppy scrolling on the average computer. Combining this with heavy use of javascript seems like a recipe for choppy web browsing.
edit: The loading animation on the o in orange is pretty awesome!
Yes, that's jittery. A page with a lot of Javascript will do that and frameworks like jQuery won't help at all. I'd recommend recoding as much as you can without using jQuery and passing it through JSLint (http://www.jslint.com/).
Try using Chrome's developer tools too to get an idea of what the bottleneck is.
Try disabling Javascript too and seeing if it's any better. If it isn't, then you know where your problem lies.
I have some 3rd party Flash SWFs on my site that are up to 100KB in size. e.g. the Flash video player "JWPlayer" SWF is 98KB.
That's fine for people with Broadband, but not so good for the slow dial up bandwidth visitors. e.g at 40 kbits/s, we're talking 20 seconds to download.
The problem is that on slow connections, all the visitors are seeing is a static white screen, and so may close the page thinking it's dead. If I right click the area where the SWF is to go, an Adobe Flash Player Object is occupying the space, but the 3rd party SWF has not finished loading in yet.
I would like the website visitors to see a loading spinner GIF or something similar.
Unfortunately, none of the 3rd party SWFs have "preloader" element. And they are not open source, so I cannot add a preloader to them.
So, my question is...
Is there any way to display a loading image, prefereably a GIF animation, while the SWF is loading?
For example, is there any way to force the Adobe Flash Player to show an image while it is loading in the SWF?
I don't have any Flash coding skills, so a solution that doesn't include creating an extra SWF or a SWF within a SWF would, probably isn't best for me, but might be worth adding to the post in case other people have a similar problem.
I am using swfobject 2.2 to embed the SWFs, so a solution that takes that into account or at least doesn't break that would help.
Thanks very much for taking the time to read my post, even if you can't help.
Dave
Without knowing which 3rd party swfs you're using it could be tough, but here's a few things to think about:
One approach would be to hide the swf (or the div that the swf is inside) until it's loaded, and then reveal it once it's finished. You can have a spinner / loading image sit in it's place in the mean time. That said, what you really need is a javascript function that gets called once the load is complete. Once this happens, you can use jQuery to .show() or .hide() your spinner and swf respectively.
JWPlayer has some events that you can make use of. It looks like onReady would do the trick for you.
As for the other 3rd party swfs, I'd look around their documentation for similar javascript callbacks. I know the swfobject has an onLoad callback, as do a few other embed solutions like Swiff, assuming you can use them.
Good luck!
EDIT: The swfobject's callback might be called when the swf has successfully been embedded not necessarily loaded. Your best bet is to play around with this and see if it works - or use the 3rd party swf's callback functions wherever possible.
EDIT 2: Here's a flash loader example.
import flash.net.URLRequest;
import flash.display.Loader;
import flash.events.Event;
function startLoad() {
var mLoader:Loader = new Loader();
var mRequest:URLRequest = new URLRequest("url-to-your-swf.swf");
mLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onCompleteHandler);
mLoader.load(mRequest);
}
function onCompleteHandler(loadEvent:Event){
addChild(loadEvent.currentTarget.content);
//Here's where you specify your js function
ExternalInterface.call("flashLoaded"); // <-- where 'flashloaded' is a js function
}
startLoad();
In the end we decided to go for a mixed setup:
For users with low bandwidth, we set the flash parameter wmode to "transparent", and set the gif to be a background image (without a loading spinner these low bandwidth users think the page is doing nothing).
However, using wmode = transparent has a negative side effect in that that Flash won't use Hardware Acceleration. But for our low bandwidth users, the bitrates of e.g. our video are low enough that in most cases they don't really need Hardware Acceleration.
For high bandwidth users, we deliver e.g. higher bitrate video, and so Hardware Acceleration becomes more important. For these users we use wmode = direct, and do without a loading spinner GIF as the SWF loads quickly enough anyhow.
With the size of our SWF files and their XML files that must also be loaded, we have gone for a limit of 1 megabit bandwidth, where if users have a higher bandwidth we don't use a loading graphic, and visa versa. Other people may find other levels more suitable.
We'd prefer to be able to set the bandwidth limit a lot lower if possible, as on older PCs we could do with some Harware Acceleration of video that is 384 kbit/s, but removing the loading spinner of a user with a low bandwidth like that would mean them waiting too long with nothing happpening on the screen, and this seems worse than losing a few frames during video playback.
Here is a link to Adobe's description of the various wmodes and how different browsers handle them.
http://kb2.adobe.com/cps/127/tn_12701.html#main_BrowserSupportForWmodes
Hope this helps someone else someday.
Dave