网站图片懒加载如何实现（LazyLoad按需加载） 对于一些拥有大量图片的网站来说，如果一个页面有超过 50 张图片，就会造成网站页面加载太慢以及移动端耗费流量太大。为了解决这样的问题，可以使用LazyLoad按需加载，又称懒加载。 LazyLoad按需加载什么是LazyLoad按需加载 LazyLoad按需加载采用图片按需加载技术，打开页面时只会加载首屏图片。访客往下滚动时才会陆续加载需要展现的图片，这样非常高效，体验舒适。 LazyLoad按需加载实现方法 我们在自己做网站时，也可以实现LazyLoad按需加载，增强网站的用户体验。下面学做网站论坛就来介绍一下LazyLoad按需加载实现方法。（以下会使用到HTML代码，如果对代码不熟悉，可以学习一下html视频教程） 引入LazyLoad按需加载必须的二个文件：jquery.js和jquery.lazyload.js。引入方法很简单，只需将下面的代码放到</head>标签上方即可；<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="https://raw.githubusercontent.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js"></script> 网站上所有图片都使用以下的格式书写：<img class="lazy" src="" data-original="图片地址" width="100" height="100" alt=""> 在网站的</body>标签上面，放上以下的JS代码，来实现LazyLoad按需加载（懒加载）；<script type="text/javascript"> $(function() { $("img.lazy").lazyload({ threshold : 200, // 设置阀值 effect : "fadeIn" // 设置图片渐入特效 }); }); </script>

处理img标签加载图片失败，显示默认图片简单代码 常规方法解决我们都知道，img标签支持onerror事件，在装载文档或图像的过程中如果发生了错误，就会触发onerror事件。可以使用一张提示错误的图片代替显示不了的图片。 例如这样使用：<img src="images/logo.png" onerror="javascript:this.src='images/logoError.png';">当图片不存在时，将触发 onerror，而onerror 中又为img 指定一个logoError.png 图片。也就是说图片存在则显示logo.png，图片不存在将显示 logoError.png。 但是，注意哦，这里有个大坑哦，如果logoError.png 也不存在，则会继续触发 onerror，导致死循环，页面卡死。而且，就算图片存在，但网络很不通畅，也可能触发 onerror。 当然，解决办法是有的，代码如下：<img src="images/logo.png" onerror="slnotimg();"/> <script type="text/javascript"> function slnotimg() { var img = event.srcElement; img.src = "images/logoError.png"; img.onerror = null; //解绑onerror事件 } </script>