页面图片读取问题_html/css_WEB-ITnose-html教程-PHP中文网

页面图片读取问题_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 12:10:06

原创

1178人浏览过

请问，有这么一个设计，页面中图片设计尺寸为1440*930像素。
那么请问，对于这么一大张图片，我是切一张大图好，还是数张小图，哪种页面读取更快？
解答最好请说明下原因，谢谢！

存了个图

视频图片解析/字幕/剪辑，视频高清保存/图片源图提取

查看详情

回复讨论(解决方案)

数张小图

整张图需加载很久才能加载完，然后显示。如是数张小图每加载完一张就会显示一张。

数张小图
整张图需加载很久才能加载完，然后显示。如是数张小图每加载完一张就会显示一张。
可是如您所说，数张小图片的话，向服务器的请求数就会变多。
而一张大图，只需要向服务器请求一次。

大图不是很好，大图加载时间比较长，让用户等待时间很久用户的体验不好引用 1 楼的回复:
数张小图
整张图需加载很久才能加载完，然后显示。如是数张小图每加载完一张就会显示一张。

可是如您所说，数张小图片的话，向服务器的请求数就会变多。
而一张大图，只需要向服务器请求一次。

当然是一张大图更快。要不然， css splitter技术是干什么的？
参见 google logo
https://www.google.com.hk/images/nav_logo107.png

当然，如果一张大图实在太大，要用户等很时间才能看到全图，确实是体验不太友好，
这种情况下可以加个loading...效果，
或者先加载一张缩略的小图来显示，同时提示一下大图正在加载，大图加载完之后再把隐藏小图，显示大图
例

 <img  src='small.jpg' id="smallimg"  / alt="页面图片读取问题_html/css_WEB-ITnose" > <img  id="largeimg" src="large.jpg"    style="max-width:90%" onload="showlarge()" / alt="页面图片读取问题_html/css_WEB-ITnose" >  </div>    <script type="text/javascript" >      function showlarge() {         // alert("large ok");          document.getElementById("smallimg").style.display = "none";          document.getElementById("largeimg").style.display = "block";            }  </script>

登录后复制

http://www.mysqlops.com/2011/09/09/weibo-web-css.html
建议楼主去看看这篇文章