This website requires Javascript to function properly. Please go to the setting of your web browser and enable Javascript for this website.

Ad by

Thanks for

waiting(OK)

Thanks for the help. Caching img really helps, after the page is loaded. But the first time when the page is loaded, it is going to be very slow. Right?

My goal is not loading the pics until user clicks the "showpic" link. The issue for me is that the div element has to been embeded in the same page, and can't be called seperately.

for example, the div must be loaded in the same page in the same request.

<div>
name1, picture
name2, picture
</div>

Is it possible to load pics at run time when user hits the "showpic" link?

(#4387132@0)
Last Updated: 2008-4-10
This post has been archived. It cannot be replied.

Report

Replies, comments and Discussions:

工作学习 / 学科技术讨论 / CSS and Javascripts questions? -waiting(OK); 2008-4-10 {289} (#4386869@0)
有一个页面, <DIV> 10 LARGE PICS</DIV>. By, default, the div is a hidden block, when user hits the link, the pics displayed. The problem is the slowness of loading the page. Is it possible to load the pics until the user hits the show-pic link with CSS and javascripts?

thanks very much

yes, 用javascript先创建一个img object, img.src="path to the picture", 这样这个picture就会提前load到cache里面。 -canadiantire(轮胎 - favete lingui); 2008-4-10 (#4386875@0)

Thanks for -waiting(OK); 2008-4-10 {548} (#4387132@0)
Thanks for the help. Caching img really helps, after the page is loaded. But the first time when the page is loaded, it is going to be very slow. Right?

My goal is not loading the pics until user clicks the "showpic" link. The issue for me is that the div element has to been embeded in the same page, and can't be called seperately.

for example, the div must be loaded in the same page in the same request.

<div>
name1, picture
name2, picture
</div>

Is it possible to load pics at run time when user hits the "showpic" link?

use ajax. -canadiantire(轮胎 - favete lingui); 2008-4-10 (#4387138@0)

It’s not so simple. -deep_blue(BLUE); 2008-4-10 {475} (#4387208@0)
You need create image on fly and on the image’s onload event use div object’s appendChild method to append image into div.

If you use placeholder image and replace the source with the remote image's source by javascript code, it doesn’t work.

AJAX doesn’t work neither. Although you can encapsulate a binary stream inside an XML envelope and encode the binary data then decode it on the client page, but this is not practical for an image file data.

With Ajax, all you need is to retrieve the URL to this image. You don't care about how the image will come to your computer. -fatbean(_); 2008-4-10 (#4387332@0)

If you know the URL of image, why do you need AJAX to get it? -deep_blue(BLUE); 2008-4-11 (#4388163@0)

我想了一下，对于这个case确实不需要用Ajax，因为在html里面图片和其content data不一样，只要你在image的src里指定url，浏览器就会自动发请求去取image。为什么你认为#4387208@0第二段说的方法不work？我测试了一下可以的。 -fatbean(_); 2008-4-11 (#4388512@0)

问各位行家一个问题，用url显示图都没问题，但真的用ajax拿到图的实际数据我倒不知如何显示到网页上，有没有直接的方法？ -tjhong(我检讨); 2008-4-11 (#4388543@0)

能说说为什么不用placeholder然后再改url的方法吗？楼下这位兄弟的英文帖子我没太看懂 -fatbean(_); 2008-4-11 (#4388577@0)
At beginning, I used wrong url, so changing url method failed. When I retry it works. -deep_blue(BLUE); 2008-4-11 (#4388627@0)

You should read LZ’s requirement carefully. -deep_blue(BLUE); 2008-4-11 {239} (#4388558@0)
He(She) wants to load image late. It means if you use the placehold method, the image tag should have src=’’. Otherwise, the image is load at beginning. Then you can try a javascript code to link real image in a button (or a link) click.

甭管我should不should吧，为啥用个隐形placeholder不可以啊，你能不能直接回答一下，你这个otherwise我看不明白 -fatbean(_); 2008-4-11 (#4388581@0)

看了半天，总算有点明白lz想干什么了。有那么复杂吗？ -holdon(again); 2008-4-16 {351} (#4396438@0)
如果已知所有图片，无需ajax.

建个javascript数组。
imagename[0]='big1.jpg';
imagename[1]='big2.jpg';
...
只是数组，图片不会被载入。
<DIV style="visible:false">
<img id=img1 src='small.jpg>
<img id=img2 src='small.jpg>
<img id=img3 src='small.jpg>
<img id=img10 src='small.jpg>

</DIV>

hit link triger javascript: img1.src=...

@Las Vegas

Thanks for

Replies, comments and Discussions:

More Topics