I have implemented a lazy-load solution for images using http://www.appelsiini.net/projects/lazyload, and it works as expected.
Now that the DNN skin I'm working on is responsive, I want to make use of ImageResizer's responsive solution: http://imageresizing.net/blog/2013/effortless-responsive-images -- the setup is working right now, but when combined with lazy-load, the images that are served are no longer responsive.
Is there a way to combine these two technologies?
We run the latest .NET and IIS 7+. Thanks in advance!
Images added to the page after DOMLoaded will not be detected by Slimmage.js unless you call window.slimmage.checkResponsiveImages() . If you use a separate lazy-load or jQuery plugin that modifies images, call checkResponsiveImages() after it completes its work.
Browser vendors advise against lazy image loading, as it drains mobile device power. Turning on the wifi or LTE radio is the most expensive operation for a device, and lazy loading can make it 3-10x more chatty.
Related
I am working on ionic 4 app which includes swiping of images to left or right. Currently the images are fetched from the server every time which causes a delay in image loading. Could any one suggest an efficient way to cache or preload the images so as to increase the performance of the app by loading images from cache.
I think you have to use ionic-img-cache and it works with Ionic Framework (v >= 1.0) or 'ionic-cli' and see this also.
All links have an example. Run the first example here and another option is using LoadingController
use ion-media-cache this directive is to store image in the device.
Check this plugin it has the feature of caching image.
https://www.npmjs.com/package/ionic-image-loader
You Just use the tag it help to lazy load image attribute it's help t
I'm using PreloadJS as part of an application that's being built with the CreateJS libraries. PreloadJS is being used to pull in graphics and audio files listed in a manifest. I've setup a progress bar and hooked the preloader's fileprogress and fileload events to update it. I'm getting progress updates as the images load, so I can see the progress bar crawling along, but I never get fileprogress updates for the audio files, just the fileload (file is completely loaded) so the progress bar sits idle and then suddenly jumps to 100%. Since the audio files are by far the largest assets, this creates something of a problem as far as providing meaningful load progress to the user.
I've looked at the documentation for PreloadJS and it indicates that XHR loading is the preferred method because it does provide the progress updates, but that PreloadJS can fall back on things like tag-based (<audio>) loading of audio files.
None of the file loading is local or cross domain, so it would seem to me that PreloadJS ought to be using XHR.
Is there a way to force PreloadJS to use XHR for everything so I can get consistent progress updates or why would I not be getting progress events for these much larger files?
I believe there are open bugs in PreloadJS and SoundJS which prevent audio loading from reporting progress. I have logged issues for both libraries:
https://github.com/CreateJS/PreloadJS/issues/99
https://github.com/CreateJS/SoundJS/issues/119
Some additional info:
Although PreloadJS will try and favor XHR-based loading for filetypes it controls, audio loading works a little differently.
SoundJS actually injects the functionality into PreloadJS to handle loading, and will not respect the useXHR parameter, instead relying on the browser capabilities (and SoundJS plugins) to load and play audio. Unfortunately, web audio requires an array buffer (loaded with XHR), whereas HTML audio requires HTML tags, so the playback capabilities dictate how audio files load.
By default, SoundJS will default to load/use the following plugins in order:
WebAudio (therefore XHR)
HTML (therefore tag-loading)
This should favor XHR-loading and webaudio for most browsers (IE is the standout that will almost always require HTML loading). You can force plugin order by registering the plugins manually before you begin playback/
Thanks for the surfacing this!
#Lanny is correct, there are open bugs for this issue. Currently SoundJS is setup in a way that always uses Tag loading with PreloadJS, even when using WebAudio which loads via xhr. The result is that regardless of plugin, there is currently no way to get progress events.
The good news is that we are currently in the process of revising how loading works between PreloadJS and SoundJS and this issue should be resolved.
Unfortunately for me, Meta Slider WP plugin does not support lazy load, but it's perfect for what I need -- well almost. Here's why:
I have a ton of images (per slider) that will be displayed in multiple sliders using this WP Meta Slider plugin. All sliders will use the Flex Slider option, not the other options they have available. And, as you can imagine, the page load time is awful.
I looked up lazy load and came across this site:
http://www.appelsiini.net/projects/lazyload
It seems to be the perfect solution for what I need, but where do I need to input the snippet of coding in Meta Slider files to get this plugin to stop loading all the images at one time? What's happening is when a visitor comes to the site, this plugin loads every single image you have uploaded to it at that first-time page load which is causing the page to load awfully slow.
Additional info:
The images are pngs, 120x220 and under 50kb. I have found that converting them into jpgs instead of gifs compresses the file size to be between 12kb and 15kb, but anything lower, the images begin to lose color quality and the image color quality is extremely important.
END OF ADDITIONAL INFO
Anyway, my image database is growing and I need the images to only load upon the visitor scrolling up or down to reduce the page load time as much as possible so visitors will not be turned off and leave the site.
Thanks!
Oh, here's the plugin, I'm using:
wordpress.org/plugins/ml-slider/
I am dynamically creating some controls in a page. it will become slow when we have some fifty controls.
what are the code optimization techniques/ guideline used in extjs?
Is there any specific methods which will slow down the entire loading?
Sencha has great posts:
Ext JS 4.1 Performance about:
Network latency which affects initial startup time heavily, but also data store load time.
CSS processing.
JavaScript execution.
DOM manipulation.
Optimizing Ext JS 4.1-based Applications about optimization tips and the Page Analyzer tool.
My tips are
Use Ext.container.Container rather than Ext.panel.Panel.
Instead of adding ext components, use XTemplate with data view to load similar controls.
if you are using many images then use image sprites - An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests.
Using image sprites will reduce the number of server requests and save bandwidth.
http://css-tricks.com/css-sprites/
I have a requirement that I think is common in many applications: paging. I have chosen to go with the "press to load 10 more" pattern, I think it looks better in a Metro app instead of using page numbers.
The problem I am facing is memory related. I load the first 10 items, which contain some images, and as I press "load more", I notice that the memory of the application is increased proportionally, obviously because of the images loaded. It soon gets to the 150MB memory limit where the operating system might actually kill the app.
What I am thinking is if there was some way after you scroll to the next page for the images not visible anymore to be unloaded from memory. This is gracefully handled by the iOS with the GetCell method, but is there an equivalent pattern in Windows 8 Javascript model?
Thanks,
Themos
Metro style apps usually do infinite scrolling using data virtualization. Check out the Build sessions on Data Virtualization in Metro style apps:
Build polished collection and list apps using XAML
Build data-driven collection and list apps using XAML
Build polished collection and list apps in HTML5
Build data-driven collection and list apps using ListView in HTML5
For example: HTML ListView working with data sources sample