手机端图片加载问题

Question

我在手机端Web开发的时候遇到一个问题，就是有时候图片加载非常慢，所以有没有什么解决方案可以解决这个问题，就是当图片加载慢的时候用默认的图片替换，或者可以说说你们在项目中是如何解决这个问题的，我可以借鉴和参考一下！！！

Answer 1

其实说白了就是懒加载，一开始界面所有的图片都是显示默认图片：

<img class="lazy" src="默认图片" data-src="真正的图片">
<script>
$(function(){
    $('.lazy').each(function(){
        $(this).attr('src',$(this).data('src'));
    });
});

</script>

问题解决,这样图片没有加载完之前都是默认图片

Answer 2

你好，如果你是 iOS 开发者，你可以使用 https://github.com/rs/SDWebImage

Answer 3

1.图片的质量进行压缩。导出图片时选择连续。
2.如果图片很多，做图片懒加载（只在用户的可视区域显示图片，其他区域不显示，仅仅显示默认图片）或者图片预加载（比如在html5动画宣传页，页面用到的图片很多，可以做一个加载进度动画，运用这个动画时间把运用到的图片都加载完毕）。
3.运用其他图片格式，例如webp,减少图片大小，图片质量也符合预期，兼容性看你具体需求。

Answer 4

尽量压缩图片大小
进行图片懒加载,懒加载插件很多，随便给你推荐一个吧：http://www.w3cways.com/1765.html

Answer 5

静态资源加载的问题有很多环节，一般通过前端优化和服务器CDN来解决
可以试试一些免费cdn。