I want to create an infinite scroll website that will present a massive amount of animated GIFs. The problem is, having all of the GIFs animating continuously after page load is causing severe performance issues, so that the website running very slow.
Is there a javascript-snippet or plugin, that stops all GIFs that are not visible in the browser window?
A solution is freezeframe.js, but it forces the user to click or hover the animations.
Related
I'm in Firefox and I'm looking at a page which has several how-to sections. Each of these has an animated git showing a user following the instructions.
The animation goes by too fast for me to be useful. I just want a way to pause the animation so that I can zoom in and see the details better. Then resume the animation.
I tried clicking on the GIF, and I get just the GIF, but it still is animated and I can't control it.
What I'd like is some way to have FF open the image so that I can pause and resume the image. Some reliable FF extension or plug-inAn would be best. An item in the context menu would be nice (using about:config). Or an item in the Settings/Applications list for images in general, or .gif files in particular (also using about:config). Or some application where I can open the app and drag the image from FF into the open app's window.
What I've tried is:
Changing how FF processes the click on the image. Its Settings does not show anything related to images in the Applications section. I can't find a way to configure FF to add more file types to this section. Anybody know how to do this?
I can view the image in WMP (Windows Media Player), but this is a clumsy process. First, I have to save the image somewhere, then I have to open the folder where I saved it, then do an Open With.... Then since WMP isn't on the list of apps, I have to do Select Another App, and scroll down to WMP and select that. I don't want to make this the default for all GIF files, so I have to do this for each animated GIF.
Once I've done this, WMP comes up and I can do what I want.
I tried a drag and drop from my image in FF to an open WMP window, but there's no response there.
I tried RealPlayer. I can do an Open With and RealPlayer is on the list of apps. But RealPlayer shows the image without animating it. RealPlayer also has an Open command and I paste in the URL of the image, but it's the same result.
I loaded the Toggle Animated Gif extension for FF. This is not satisfactory because I can either run the animation or show the GIF without any animation. I want to be able to freeze the animation in the middle of it.
Same difficulty here. Unfortunately, there's no such Firefox extension for now. The closest one is https://addons.mozilla.org/en-US/firefox/addon/gifpuase. It allows to pause a GIT, but not to resume - so not enough for you.
While I also prefer Firefox, but for this I suggest Chrome and Gif Scrubber: https://chrome.google.com/webstore/detail/gif-scrubber/gbdacbnhlfdlllckelpdkgeklfjfgcmp. Not immediate, but powerful.
Sometimes I'm seeing some awesome animation on the web, but most of the time, the animation plays too fast for me to find out how it's transition.
I'm thinking if there is a tools which can slow down the animation, it will be easy to debug animation in the page.
This is really weird behavior. Having difficulty even quantifying. Have had to revise a few times.
Best I can do is the following:
The tech stack for my app is Backbone Marionette, handlebars.js, require.js.
The app contains images mostly of icon size - say 32x32 and under. Some jpg, some png, some svg.
Some of the images, the same ones each time, don't display. That's a common issue on which many have posted. No big news there.
But if I hit the sleep button, leave the iPad sit for a minute or two until the unit really goes into hibernate mode, and then revive it, the images slowly and magically fade in. They don't abruptly display when the screen lights. They fade in afterward.
Doesn't work to just hit the sleep button and instantly revive. Have to wait a minute until it truly hibernates.
After true hibernation, no matter how many times I refresh the page, the images are there. But, if I go and clear the cache on Safari and load the page, the images are not there again - until I do that hibernate thing.
All of these images do display without fail in a browser on a PC (all flavors). It's just on the iPad that they don't.
I thought, at first, it was just images I was loading in collection views. It is not. I have a third party HTML5 video player in the app. It has a play button and other controls in svg format. This also exhibits the behavior above.
Once the iPad has hibernated and been revived, the images fade in. Only clearing cache makes them disappear again.
There are no 404 errors when the images don't display (checked in dev console on a MAC). In fact, if I just tap the screen where the video play button is supposed to display, the player begins. So the button seems to actually be there, just not painted on the screen - until you do that hibernate thing.
Some images in the app always load no matter what. I'm looking at those images to see if I can note anything special about them or the code which renders them.
I tend to think it's not the images themselves because the very same images in a plain web page always display on the iPad. Also, that third party video player in a plain web page displays the svg play button and controls without fail on the iPad.
It's just in my app that the behavior occurs. So it's logical to think my app is where the problem lies. I just can't seem to find a common thread for the images that always work vs ones that don't.
Not sure what code I can even post here. I'll look and see what might make sense to post.
Definitely a problem loading images dynamically via the framework. They are there but do not paint. No idea what the problem actually is. Literally only happens on Safari mobile browser. Can't make it happen anywhere else, even old IE. Know one solution that definitely works though. Preload all the images by explicitly including them in a div in your markup. When you load your marionette app, remove the div - $("#preload-images").remove(). Thereafter the images never fail to paint when added dynamically via marionette.
If I limit WebBrowser's height, and content is longer, scrollbar is created inside the WebBrowser (effectively, HTML page is long), similar to IE in WP7. This scrollbar behaves the way I want to - after swift swipe it continues to scroll, slowing down.
But if I place a div with a scrollbar in the WebBrowser content, this scrollbar behaves like regular HTML scrollbar, it does not keep scrolling after user stops touching the display.
Is there a way to make this work too ?
Thanks
No, not easily. The WP7 IE9 browser control supports the overflow:scroll CSS property that allows the user to scroll content within the current page. It is worth noting that most Android and iPhone browsers do not support this, although it has been added in iOS5. None of these browser support inertia scrolling for overflow:scroll, WP7 included.
The only way to get inertia scrolling for overflow content is to do it yourself using JavaScript. For WebKit browsers there is a popular library, iScroll, that provides this functionality. However, it does not work for WP7 (due to lack of CSS3 3D transforms that are used to push the scrolling content onto a different layer for hardware acceleration) - so you will need to write your own implementation. Good luck!
I have written a windows phone application. When the application starts up it shows the splash screen which is cool and i can change the image. But is there a way to add a loading animation like those dots moving across the screen.
It would be nice if i can add one of those animation in the splash screen. Can it be done. if yes please add in your answers.
As of right now there is no way to replace the loading image that shows up with an animation. Although there are workarounds:
Remove the image all together. Might want to be careful though because Microsoft requires that the application show some kind of feedback to the user within a few seconds of launching the app. Use this only if your app loads really fast.
Display a snap shot of the loading screen as an image so when the app does load you can show an animation with the same background image and it appears that its the same loading screen.
In your case I would recommend using a popup control with a loading animation inside (Option 2). To learn how to create a popup go here. Or if you want a well documented popup I know telerik has there own version as well.
Next place the loading message in a textblock or put your own image and animation inside of the popup. Obviously the easiest animation would be to use the Performance Progress Bar in the silverlight toolkit.
Now what you'll want to do is set the popup opened by default. Whenever your processing is done all you have to do is set the popup visibility to hidden in your C# code.
Some examples of how this is implemented can be found here:
Creating a Splash Screen
Creating an Animated Splash Screen
All About Splash Screens
And here's an example for an XNA game:
Creating a Splash Screen for your XNA game