Heim >Web-Frontend >HTML-Tutorial >页面图片读取问题_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 12:10:06999Durchsuche

请问,有这么一个设计,页面中图片设计尺寸为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
建议楼主去看看这篇文章

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn