Question

我的网站上有一个网页, 里面有100张图像,

有没有办法让它更优雅和高兴的看到?

Answer 1

您可以 < a href=>" "http://www.appeselsiini.net/ projects/lazyload" rel="不跟随 noreferrer"\\ strong > Lazy load 图像, 这意味着它们只在浏览器上显示时才装入。只需使用以下方法即可 :

$("img.lazy").lazyload();

但是,如果页面负载中可见的图像非常大的文件大小, 您无法做多少事情来阻止它。

我之前用来使这个更方便用户的想法是,将每个 img 元素都放置在 div 中,该元素的背景图像为 < a href=" http://ajaxload.info/" rel= "nofollow noreferrer" > ajaax loader 。这至少让人看到某些东西正在装入。然后,一旦装入图像,这将覆盖装入图像。

EDIT: < /strong> 见您的 < a href=> https://stackoverflow.com/ questions/10735366/ best-way-to-load-100-images- in-one-page/10735400#comment/13946542_10735366>>,如果你使用非常小的图像,作为 < a href="https://stackoverflow.com/a/10735480/370103", faf12 已经指出, 使用 < a href=" http://cs-tricks.com/cs-stricks-s-spreites/" rel="nofolveept noreferrrr"\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

http://spritegen.website-properation.org/" rel="notfollow noreferrer">CSS Splite 生成器也可用于阻止你完成自己完成的艰巨任务:

Answer 2

由于图像非常小, 这可能是 cs 示意图有用的情况。

您没有100+小图像, 而是有一个大的图像。

想要显示特定图像时,必须指定背景坐标,例如:

div#div1 {background-position:0px -100px}

Answer 3

让图像在装入时淡化,

$( img ).css( opacity ,  0.0 ).load(function(){
  $(this).animate({ opacity :  1.0 });
});

http://jsfidle.net/ Guffa/gzFFN/" rel="nofollow" >http://jsfidle.net/ Guffa/gzFFN/

Answer 4

http://code.google.com/p/jquery-appear/" rel="no follow" >http://code.google.com/p/jquery-appear/

当对象“出现”即显示在屏幕上时, jQuery 出现事件就会触发。

为所有图像创建容器, 仅在屏幕上可见时才装入实际图像。

Answer 5

也可以在这个堆叠链接上找到另一个有趣的解决方案。它适用于所有内容, 但答案中提供的代码也可以适用于图像装入。 Link

友情链接