主要做了两种图片加载的效果

创新互联公司专注于白塔企业网站建设,响应式网站,商城网站制作。白塔网站建设公司,为白塔等地区提供建站服务。全流程按需网站建设，专业设计，全程项目跟踪，创新互联公司专业和态度为您提供的服务

一种是遇到页面图片比较多的时候，带读条效果的加载提示（为了验证正确加载，设置了1秒钟的加载间隔时间）

另外一种是根据滑块的位置进行图片的预加载，在用户不察觉的情况下，实现瀑布流的加载效果

一 延迟加载

主要思路：

1. HTML的img标签中，将正确的地址存在data-src属性中，给所有图片设置一个转圈圈的loading图片作为background
2. js中，依次读取每一个img，将data-src中的地址替换到src中，去掉background
3. 每成功加载一张图片，进度条的百分比进行相应的变化。
4. 如果加载不成功，就提示图片加载错误。

HTML结构很简单，就是一个div.picList包裹了所有img，然后加上一个简单的进度条div#loadBar

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

本文标题：js图片加载效果实例代码（延迟加载+瀑布流加载）-创新互联
浏览地址：http://scyanting.com/article/jidop.html