网页在手机上崩溃答案

【问题标题】：Web page crashes on mobile网页在手机上崩溃
【发布时间】：2015-09-19 11:50:44
【问题描述】：

你好，我是网页设计新手，

我使用 twitters bootstrap 创建了一个网站。每次我尝试在移动设备 (ios) 上加载 http://www.taekwondo.uwcs.co.uk/gallery.php 时，浏览器都会崩溃 (chrome) 或在该页面上运行非常缓慢。

我想知道如何修复这个问题（如何调试它）。页面上的图片太多了吗？我需要降低图像质量吗？

我正在使用此插件 (http://www.appelsiini.net/projects/lazyload) 延迟加载图像。这是我有大约 8 行图像的 html。

   <div class="row">
     <div class="col-md-3">
       <img class="img-responsive " src="images/load.gif" data-original="images/gallery/freshers/29.jpg" alt="">
     </div>

     <div class="col-md-3">
       <img class="img-responsive " src="images/load.gif" data-original="images/gallery/freshers/30.jpg" alt="">
     </div>

     <div class="col-md-3">
       <img class="img-responsive " src="images/load.gif" data-original="images/gallery/freshers/31.jpg" alt="">
     </div>

  </div> <!-- End of row -->

页面上的jQuery

 $(".img-responsive").lazyload();

提前致谢

【问题讨论】：

标签： html twitter-bootstrap mobile

【解决方案1】：

问题是您一次加载所有图像，因为如果用户打开页面，它们都在用户的视口中。您应该只加载当前对用户可见的图像。

为此，您可以在行中添加最小高度（这不是响应式网站的最佳解决方案）（例如，最小高度：50 像素）。更好的解决方案是在不延迟加载的情况下加载第一行，也许是第二行。其余行可以延迟加载。那么性能问题应该解决了;）

第二件事是，我 wouldn't use a jQuery 插件，因为对于像延迟加载这样的微小功能，你不需要这么大的库，它也会降低性能。

我更喜欢像justlazy 这样的轻量级和更高效的插件。在示例中，您可以看到，只有在用户可见的情况下才会加载图像。如果您加载您的网站，则会加载所有图片。

你可以按如下方式使用justlazy：

1.定义占位符：

<span data-src="path/to/image" data-alt="some alt text"
      class="justlazy-placeholder">
</span>

擅长此解决方案的还有 google 不会索引您的加载 gif。如果你想对它进行seo优化，你可以使用带有小图像的img作为src-attribute而不是占位符的span。

2.通过javascript注册延迟加载

Justlazy.registerLazyLoadByClass("css-class");

【讨论】：