网页图片过大,加载很慢,影响网页显示的解决方法

作者: 龙哥 分类: 技术 发布时间: 2021-12-15 22:05 ė4,161 次浏览

网页加载图片过大,导致网页打开速度显得很慢,就考虑用预加载的形式。

推荐使用jQuery图片预加载(延迟加载)插件Lazy Load
Lazy Load也叫惰性加载,延迟加载,顾名思义,就是在图片未到达可视区域时,不加载图片,我们常常在很多的优秀网站上看到类似的例子,例如迅雷、土豆、优酷等,由于一个网页的图片非常多,一次性加载增加服务器压力,而且用户未必会拉到底部,浪费用户流量,Lazy Load采用按需加载,更快的加载速度从而达到优化网页的目的。

使用方法:

加载jQuery:

<script src="/Template/default/js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/jquery.lazyload.min.js"></script>

设置图片的占位符为data-original, 给图片一个特别的标签, 像这样设置图片

<img class="lazy" src="/css/images/loading.svg" data-original="/images/123.jpg" alt="title">
<script type="text/javascript">
    $(function(){
        $("img.lazy").lazyload();
    });
</script>

图片预先加载距离:threshold,通过设置这个值,在图片未出现在可视区域的顶部距离这个值时加载。默认为0,下面为设置threshold为200表示在图片距离可视区域还有200像素时加载。

$("img.lazy").lazyload({
    threshold :200
});

事件绑定加载的方式:event,你可以使用jQuery的事件,例如“click”、“mouseover”,或者你也可以自定义事件,默认等待用户滚动,图片出现在可视区域。下面是使用click:

$("img.lazy").lazyload({event:"click"});

显示效果:effect,默认使用show(),你可以使用fadeIn(逐渐出现)方式,代码如下:

$("img.lazy").lazyload({
    effect :"fadeIn"
});

搞定。

本文出自 俞凌龙博客,转载时请注明出处及相应链接。

本文永久链接: https://blog.jlwz.cn/261

Ɣ回顶部