[chragency]

Hi guys,

I'm developing a little "bag configurator" for a italian company.

http://stage.wic-o.i...tor/a1-regular/

as you can see when you change the color or if you click on a handle, something strange happens. Just the first time, for less then one second (when image is loading) seems that lemon stand can't find the image.
Infact you can see the tipical icon of non-existent image with the canvas border....then all goes right!


I use something like that to change divs contents after click

onclick="$(this).getForm().sendRequest('on_action', {update: {'borsa': 'show_borsa'}})"

what I can do to fix this problem?

thanks so much and sorry for my bad english

[apepp]

...great work there chragency!

...i think this is to do with cache on browsers...in firefox you get that "square" loading area pop up...in safari you don't see one...i'm on mac, so maybe this is the same on windows IE as it is in firefox (?).

...obviously, once the images is loaded into browser cache you don't see the loading area "square" (in firefox)...as it pulls from the cache of the browser instead...

...maybe there is a way to somehow "pre-load" the hidden images on page load?...

...i did see the images were 1000px width PNG, loading into 363px width...would it be any different if the images were already 363px?

...with images on my test dev site i put in getThumbnailPath to pull in right size images pre-rendered on the fly...

...not sure if this would help in anyway though, maybe:

http://lemonstandapp.../class_db_file/

<img title="" src="<?= $image->getThumbnailPath(363, 330, $as_jpeg = false) ?>" alt="" width="363"/>

...i did see we have two div id the same name, one inside the other, not sure if this is anything too significant...probably not:

<div id="borsa">
<div id="borsa">
<div id="img_borsa">
<div id="img_manico">
</div>
</div>

Andrew

This post has been edited by apepp: 01 February 2012 - 05:22 PM

[EHLOVader]

apepp, on 01 February 2012 - 04:35 PM, said:

...great work there chragency!

...i think this is to do with cache on browsers...in firefox you get that "square" loading area pop up...in safari you don't see one...i'm on mac, so maybe this is the same on windows IE as it is in firefox (?).

...obviously, once the images is loaded into browser cache you don't see the loading area "square" (in firefox)...as it pulls from the cache of the browser instead...

...maybe there is a way to somehow "pre-load" the hidden images on page load?...

...i did see the images were 1000px width PNG, loading into 363px width...would it be any different if the images were already 363px?

...with images on my test dev site i put in getThumbnailPath to pull in right size images pre-rendered on the fly...

...not sure if this would help in anyway though, maybe:

http://lemonstandapp.../class_db_file/

<img title="" src="<?= $image->getThumbnailPath(363, 330, $as_jpeg = false) ?>" alt="" width="363"/>

...i did see we have two div id the same name, one inside the other, not sure if this is anything too significant...probably not:

<div id="borsa">
<div id="borsa">
<div id="img_borsa">
<div id="img_manico">
</div>
</div>

Andrew

I agree with what Andrew said. It is because this is the first time the browser has seen the image, and unfortunately it feels like showing as much or little progress as it can is beneficial to the user experience.

If you do some preloading you will get a better look. Here is some info on how you can pull that off.
http://perishablepre...avascript-ajax/

Also as andrew said, making sure your images are scaled properly server side will take undue processing away from the client's browser. It will no longer have to spend time resizing the image, and most people don't trust, or like the quality of the resampling done when resizing inside the browser. You should notice an increase in the quality of the image as well as the quality of the user experience.

Also if you do decide to do any scaling of those images within Lemonstand. You will want to make sure to use ImageMagik. It can work with PNGs which will be needed for your transparency, and frankly look nicer too.

[apepp]

...yep, well put Joe...

...forgot to mention ImageMagick, I have that running here too on my MAMP Pro dev site...works fine!

...more on that here:

http://forum.lemonst...ch__1#entry2902

[chragency]

apepp, on 01 February 2012 - 07:21 PM, said:

...yep, well put Joe...

...forgot to mention ImageMagick, I have that running here too on my MAMP Pro dev site...works fine!

...more on that here:

http://forum.lemonst...ch__1#entry2902

Thanks guys, I think you're right...Probably the png images are too big...The problem is that I need also to zoom the composed image, but I think that the best way is to create two versions. One full size and one scaled!

I try and I tell you how is going..

Now I have a lot of problems to understand the POST system to pass variables (for example I want to print the handle information on the right under "manico" when somebody click on an handle)
It's a little bit difficult...I need to study!

[apepp]

chragency, on 03 February 2012 - 02:26 PM, said:

Thanks guys, I think you're right...Probably the png images are too big...The problem is that I need also to zoom the composed image, but I think that the best way is to create two versions. One full size and one scaled!

...as above I think you might be able to solve this problem by using the "getThumbnailPath" image and render the master BIG image to other sizes...

...for example, i have a nivoslider gallery here on my dev site...that links in two pre-rendered images (from one source image)...the small thumbnails that slide in the jquery nivoslider gallery...

...and the larger image rendered at 500 pixel width, this larger image is a popup using the prettyphoto jquery plugin...

<? if ($product->images->count): ?>
<div id="slider" class="nivoSlider">
    
    <? foreach ($product->images as $image): ?>
    <a title="<?= h($image->title) ?>" class="gallery_image" rel="product_image" href="<?= $image->getThumbnailPath(500, 'auto') ?>">
    <img title="<?= h($image->title) ?>" src="<?= $image->getThumbnailPath(250, '250') ?>" alt="" width="250"/></a>
    <? endforeach ?>
    
</div>  
<? endif ?>

...i'm also pulling in the "$image->title" (that is entered in lemonstands image upload area) and this, in my case, is used on the nivoslider caption area and for prettyphoto jquery, by way of the <title> tag...

...you might be able to pull in the title of the bag handle PNG image (in your case) into the "Manico" area...

...you might also be able to use jquery cloud-zoom for magnifying images:

http://www.professor.../cloud-zoom.htm