How to achieve an image loading affect?

Hello,
Before you continue, take note that this affect only seems to work in Mozilla Firefox and Google Chrome -
Website Link : http://boinx.com/
[Should work with most images on the website]
I am a web designer and when browsing the internet, I noticed this affect. When I visited a page on their website, I noticed that wenever an image first loads, It is shown as a matrix of squares that shrink/un - blur to the normal resolution of the image.
[Above Image] Look to the bottom of the image and you will see something like a pixelated image . . .
As The image continue to load, it looked like the rest of the above image . . .
Here you see the fully loaded image [Above Image]
Can you tell me how to achieve and control this affect?

Hi There:
I don't think it is any effect.
The images used on the home page as the main graphics are all JPG images and they must be saved for progressive download when created. For example you can save an image in Photoshop and choose progressive as one of the option while saving.
Progressive download basically implies that images are downloaded pixel by pixel so that user feel something is happening (instead of downloading the whole image in one go which can take time).
To know more on this please refer to links below:
http://en.wikipedia.org/wiki/JPEG
http://www.faqs.org/faqs/jpeg-faq/part1/section-11.html
Regards,
Vinay

Similar Messages

How to achieve resize image effect

Can anyone tell me how to achieve this effect with image resizing in RH, as the images do at the link below? I cannot find the method in the RH Help.
http://help.adobe.com/en_US/robohelp/robohtml/WS1b49059a33f7772644666e3b1373013a398-8000.h tml

Hi there
Sorry, but RoboHelp does not offer a method to achieve this. Unfortunately that's a huge hint that Adobe isn't using RoboHelp to develop those pages.
If that's the effect you are after, you will need to roll your own with some JavaScript that does a hide and show on text and images.
One way you might achieve it with a single image would be to insert the image *TWICE* on the page. Then scale one pretty small. Take the full sized image and tuck it inside a Dynamic HTML drop-down. The net effect would be that the user would click to see the full sized image (revealing the DHTML drop-down) and the smaller version would be "pushed" farther down the page.
Cheers... Rick

How to Achieve this Data Load into Cube

Hi Experts,
Could you please update me on how to achieve this
I got a History data (25-35 Million Records) for about 8 years to be loaded to BW.
What is the best approach to be followed
1) Load everything into one cube and create aggregates or
2) Create 4 different cubes (with same data model) and load load 2 years of data into each cune (2Years * 4 Cubes = 8 Years Data) and develop a multicube on top of 4 cubes
If so how can i load data into respective cubes
Ex: Lets assure i got data from 31.12.2007 to 01.01.2000 which is 8 years of data
Now i created 4 Cubes--C1,C2,C3,C4 & C5
How can i specifically
load data from 01.01.2000 to 31.12.2001 (2 Years) to C1
load data from 01.01.2002 to 31.12.2003 (2 Years) to C2
load data from 01.01.2004 to 31.12.2005 (2 Years) to C3
load data from 01.01.2006 to 31.12.2007 (2 Years) to C4
load data from 01.01.2008 to 31.12.2010 (2 Years) to C5 (Currently Loading)
Please advise the best approach to be followed and why
Thanks

If you already have the cube C5 being loaded and the reports are based on this cube, then if you donot want to create additional reports, you can go ahead and load the history data into this cube C5.
What is your sourcesystem and datasource?. Are there selection conditions (in your infopackage) available to specify the selections? If so, you can go ahead and do full loads to the current cube.
For query performance, you can create aggregates on this cube based on the fiscal period / month / year ( whichever infoobject is used in the reports)
If your reports are not based on timeperiod, then multicube query will work as parrallelized sub queries and so there will be 4 dialog processes occupied on your BW system everytime the query is hit.
Also any changes that you want to make in cube will have to be copied to all cubes, so maintenance may be a question.
If there are enough justification, then approach 2 can be taken up

Rotating image loaded with CameraRoll

I'm having trouble working out how to rotate an image loaded using CameraRoll on an AIR for iOS app.
This code below works fine (displayImage() is called when CameraRolls media event returns completed, and imageArea is the scrollPane where the image is shown.
     function displayImage():void
     var image:Bitmap = Bitmap(imageLoader.content);
     imageArea.source = image;
The image loads just fine untill I try to rotate it:
     function readMediaData():void
     var image:Bitmap = Bitmap(imageLoader.content);
     var imX:int = image.width;
     var imY:int = image.height;
          if (imX>imY)
              image.rotation = 90;
     imageArea.source = image;
With the second version the image seems to load because the scroll bars expand to the size of the image I choose, but I don't see anything on the stage.
What am I doing wrong?
Any suggestions would be really appreciated.

I added the new width back to images x position but no joy; no matter what x & y I set the image to, it cannot be seen. The scroll bars expand exactly the right amount for the 'invisible' image, regardless of it's x & y positions as well (you'd think if the image was out of the scrollPane the bars wouldn't adjust like that. I'm not doing something right.
I'm stumped on this but I'll keep trying things. Thanks for your help and the lead, I appreciate it and it may be part of the problem, but there seems to be a different problem as well.

How can i control what images load on my project to save preload time and avoid loading all images, elements, divs not yet visible?

Sup buddies,
How can I control what images load on my project to save preload time and avoid loading all images, elements, divs not yet visible?
As the project grows in size the load time increases. How does one control not loading all images ,divs,elements etc. until they're
needed on the timeline? For example some sections are off and only become visible when recalled. My projects slowly grow in size so loading
all images , is counter productive . My other option would be to create separate htmls but that breaks the seamless user experience .
TY...Over N Out...

hello, kiwi
quote: "Is there an easy way to burn a completed project to DVD, but keep only the (lo res, lo size) previews on my hard drive?"
yes.
maybe,...
1. you might think of making DVD backups first prior to importing the photos into Aperture. "Store Files: In their current location" once in Aperture make low rez Previews, and export finished Project.
or,
2. bring in the photographs to hard drive first prior to importing the photos into Aperture. "Store Files: In their current location" once in Aperture make low rez Previews, and export finished Project.
the low rez Previews will stay in Aperture but the high quality Versions will be exported onto DVDs and gone from the hard drive (if you delete the originals).
another way would be to export small about 50-70 pixel wide high quality jpegs to a folder on your Desktop and import & keep these in Aperture Library as a reference. make metadata to show where the original Project DVDs are stored and DVD filing system used.
victor

How to use image load gif of 「GIF87a」 by ByteArray ?

Hi all:
I want use image load gif file of 「GIF87a」 by ByteArray, but it not be displayed correctly on the screen, How can I do it , or How to conver 「GIF87a」 to 「GIF89a」 ?
private function onButtonClick():void {
    fileRef.browse([new FileFilter("Images", "*.jpg;*.gif;*.png;*.swf")]);
    fileRef.addEventListener(Event.SELECT, onFileSelected);
private function onFileSelected(e:Event):void {
    fileRef.addEventListener(Event.COMPLETE, onFileLoaded);
    fileRef.load();
private function onFileLoaded(e:Event):void {
    var bytes:ByteArray = e.target.data;
    imageLoader.source = bytes;
<mx:Image id="imageLoader" onclick="onButtonClick()">

Hi zhaojie198281,
I've made a small modification on your code and it works fine. Try the following code,
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        width="900" height="400">
<fx:Script>
<![CDATA[
   private var fileRef:FileReference = new FileReference();
   private function onButtonClick():void {
    fileRef.browse([new FileFilter("Images", "*.jpg;*.gif;*.png;*.swf")]);
    fileRef.addEventListener(Event.SELECT, onFileSelected);
   private function onFileSelected(e:Event):void {
    fileRef.addEventListener(Event.COMPLETE, onFileLoaded);
    fileRef.load();
   private function onFileLoaded(e:Event):void {
    var bytes:ByteArray = e.target.data;
    imageLoader.source = bytes;
]]>
</fx:Script>
<fx:Declarations>

</fx:Declarations>
<s:layout>
<s:VerticalLayout paddingTop="10" paddingLeft="10"/>
</s:layout>
<s:Button label="Load!" click="onButtonClick()"/>
<mx:Image id="imageLoader"/>
</s:WindowedApplication>

How do I make a loader image similar to those shown at program opening?

I'm looking to build a loader image, that opens up at the start of my script, and automatically closes after a few seconds. I opened up the image processor script to see how Adobe has added images to alerts, but it's an extensive doc, and I couldn't tell where the image was being pulled from, as the variable only shows up twice, and is only called, and not set. Also is there another method other than alert to call a box like this? I would prefer it have no buttons.

I was able to boil your script down, to what I need. Works great in extendscript, but for some reason, only shows a portion of the image in photoshop and illustrator. This was happening even before i boiled it down. Thoughts? The last thing I'm trying to do with it, is figure out if I can set a transparent background for the window. I also tried using backgroundColor, but was unable to set the attribute correctly... there is a lot to learn with Adobe scripting. I also couldn't find reference to what DELTA_H is, I have a bunch of their PDFs, and googled, but couldn't find reference to this. I'm trying to be resourceful so I don't have to ask such remedial questions.
Here's the revised script, and a link to the image I labelled test on my desktop: http://img2.wikia.nocookie.net/__cb20110725041802/logopedia/images/8/89/Logo_rolling_stone s.png
PreviewWindow = function() {
w = 285;
h = 313;
PreviewWindow.DELTA_H = 1;
PreviewWindow.open = function(file, w, h, title, ms) {
PreviewWindow.openFile(file, w, h, title, ms);
PreviewWindow.openFile = function(file, w, h, title, ms) {
var type = (ms > 0) ? 'palette' : 'dialog';
var win = new Window(type, title || "Preview: " + decodeURI(file.name),undefined,{borderless : true});
win.preview = win.add('image', undefined);
win.preview.icon = file;
win.show();
if (ms > 0) {
$.sleep(ms);
delete win;
$.gc();
PreviewWindow.open("~/Desktop/test.png", undefined, undefined,
"Preview Test", 500);

How do I get image puzzles to load as I am unable to send emails through my aol account today.

How do I get image puzzles to load in order to be able to send aol.com email messages. Today I am not able to send emails because aol is having me solve an image puzzle. The problem is, is that an image puzzle does not load up, thus I cannot send emails. How to fix this? Tools, then what?

Try going into Settings > Mail, Contacts, Calendars > select the account > account name , tap on SMTP (under the 'Outgoing Mail Server' heading) and then tap on your Primary Server and try entering your email account and password and see if it then works

How do I turn off image loading?

How do I turn off image loading in Firefox for Android?

For every browser, there exist Extension AdBlock (also, there exists Adblock Plus) :
For Firefox - https://addons.mozilla.org/en-US/firefox/addon/adblock-plus/
After instalation, on the right upper corner (along with address bar) there appears an icon. right click on that >Settings> Edit filter> and add these lines
*.gif
*.png
*.jpg
*.bmp
*.swf
and click Save.
after this, the images+flash files wont be loaded on sites, but if you want to temporarily enable for specific site, then while you are on that site(page), click the icon and clcik *'''Dont run on this page'''* (or pause). then you can again re-enable.
Anyway, there exist other several extensions to disable image load :
**for Firefox** : 1) Image Block; 2) ImgLikeOpera (for image blocking) + FlashBlock (for flash blocking)

How to achieve Delta Loads

Hi All,
Can any one throw some light on how to achieve initial and delta loads having cleansing and Matching records?
Many Thanks
Rajeev

Hi All,
Can any one throw some light on how to achieve initial and delta loads having cleansing and Matching records?
Many Thanks
Rajeev

How will the Google Image Search API being deprecated/discontinued affect Photoshop Touch?

How will the Google Image Search API being deprecated/discontinued affect Photoshop Touch?
Important: The Google Image Search API has been officially deprecated as of May 26, 2011. It will continue to work as per our deprecation policy, but the number of requests you may make per day may be limited.
https://developers.google.com/image-search/

Alternative options will be implemented as needed.
-Dave

How to replace wecenter default loading image(ss.gif).

Hi All ,
I am working on webcenter customization .
Can anyone provide me how to replace webcenter default loading image which appears before webcenter content gets loaded .
Appreciate any prompt response .
Thanks ,
Arun.

If it's the splash screen you speak of, a custom skin defining these selectors may work - af|document::splash-screen, af|document::splash-screen-content, af|document::splash-screen-message and af|document::splash-screen-icon.
Please note that I have not tried these myself.

How does image borders affect calculation of "center of mass" of particles?

Hi!
I have a question about how borders in the images affect calculation of "center of mass".
My original image (0) is a 640x480 grayscale image with border of 3.
I make a binarized image (1) of the original image (0) to search for particles. For each particle I find, I use the ROI for the particle to extract a third image (2) from the original image (0).
All of the images have borders of 3.
When using the ROI from particles in image (1), are the boundingBox-coordinates related to the outer edges of the image (which makes the image actually 646x486), or is it related to the original origo of the image (making the image "logically" 640x480)?
The same question goes for calculation of
center of mass for the particle, when using image (2). After running a particle filter on image (2), I use imaqCalcCoeff() to calculate IMAQ_CENTER_MASS_X and IMAQ_CENTER_MASS_Y, stored in local_x and local_y. To get the global_x and global_y, which is the center point of the particle related to the origo of image (0), I say that:
global_x = local_x + boundingBox.left;
global_y = local_y + boundingBox.top;
Do I need to make further adjustments since I am using borders, e.g. adding/extracting 3 from the global_x and global_y to have a correct answer, or is IMAQ vision taking care of this for me?
Do I have to actually define that:
global_x = local_y + boundingBox.left - borderSize;
or
global_x = local_y + boundingBox.left - 2*borderSize;
I guess (and hope) that the answer is no, that I can use:
global_x = local_x + boundingBox.left;
-but I need it confirmed...
Thanks,
Torbjørn

The image border is only used for processing (filters, etc.) It is not included in any coordinates or measurements. Therefore, don't include it in any calculations.
Bruce
Bruce Ammons
Ammons Engineering

How to achieve this tree table (displaying/modifying non leaf level details) ?? Image inside

Region
location
Dept
Budget Available
Allot Budget
Unused Budget
Decision for unused budget
US
200$
User Input
NY
100$
User Input
CA
100$
User Input
HR
50$
User Input
IT
50$
User Input
---------30$--------
20$
LOV
Add to Location
Use for Future Project
Add to Region
Spend as Bonus
How to achieve this tree table ?
My client wants that they should also be able to manage budge at Location or region level not only at the leaf(Dept) level.
I did a lot of research and finally found out that the details can only printed at the leaf(Dept) level.......
We can not hard code Region, locations and departments in table rows. When table tree is displayed we will only show all the regions... (US, UK, SA, IND, AUS, CAN,RUS, JPN.... etc..)
For Example:
Locations for US (NY, CA, OKH, WC...... etc.)
Locaitons for UK (SC, ENG, WL..... etc) and so on......
Departments for CA (HR, IT, ADMIN, FIN, TRVL, OPRN........ etc. ..)
Thanks in advance... It will be really great help if I get some breakthrough...
-Rahul

Hi,
what if you add a transient attribute to those view objects? This way you don't need to change the table structure.
Frank

How do I position a Loader image inside a Sprite?

In AS3 / CS4 I'm trying to programmatically create a bunch of rectangular objects, let's call them 'cards', that will contain an image and a colored background and eventually some other elements like text. I want to create alot of these cards and move them around inside of a larger panel (also a Sprite) of sorts. I can successfully create colored rectangles in my cards and place the cards where I want in the panel, but whenever I try to add an image to a card, I can't seem to position the image inside the card's coordinate space, it ends up being placed inside the larger panel's coordinate space instead, even though I'm adding the image/loader as a child of the card. I thought maybe it had something to do with having to wait until the image loading was complete, so I added the listener as a test but that didn't work. Here's the code:
            var cont:Sprite = new Sprite(); containing 'card'
            var rect:Sprite = new Sprite(); // draw a colored rectangle in the card
            var loader:Loader = new Loader();
            loader.contentLoaderInfo.addEventListener(Event.COMPLETE, positionLoader);
            rect.graphics.beginFill(0xbb3399);
            rect.graphics.drawRect(60,60,99,99); // this works as expected
            rect.graphics.endFill();
            cont.addChild(rect);
            addChild(cont);
            var req:URLRequest = new URLRequest("top.png");
            loader.load(req);
            function positionLoader(e:Event):void {
                loader.x = 30; // position the image inside the containing card
                loader.y = 30;
                cont.addChild(loader); // add the image to the card

I solved this problem.

How to achieve an image loading affect?

Similar Messages

Maybe you are looking for