Question

我正在使用jquery.lazyload来加载我的图片。所有工作都按照样品正常工作。

现在我需要在原始图像没有加载或错误的情况下将占位符图像更改为我的'no-image.jpg'。

我得到了与此相关的以下主题。 Can't get LazyLoad and onerror to work together on an image

根据线程我更新了lazyload js文件并包含了错误图像的脚本。请检查我的html如下;

 <!DOCTYPE html>
<html>
<head>
    <title>Lazy Load Enabled</title>
    <style>
        .container img {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <img class="lazy" data-original="img/1.jpg" width="765" height="574" /><br />
        <img class="lazy" data-original="img/2.jpg" width="765" height="574" /><br />
        <img class="lazy" data-original="img/error.jpg" width="765" height="574"><br />
        <img class="lazy" data-original="img/4.jpg" width="765" height="574" /><br />
        <img class="lazy" data-original="img/5.jpg" width="765" height="574" /><br />
        <img class="lazy" data-original="img/6.jpg" width="765" height="574" /><br />
        <img class="lazy" data-original="img/7.jpg" width="765" height="574" /><br />
        <img class="lazy" data-original="img/8.jpg" width="765" height="574" /><br />
    </div>

    <script type="text/javascript" src="script/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="script/jquery.lazyload.js"></script>
    <script type="text/javascript" charset="utf-8">
        $(function () {
            $(".lazy").error(function () {
                $(this).attr('src', 'img/no-image.jpg');
            });

            $("img.lazy").lazyload();
        });
    </script>
</body>
</html>

这里我故意放置文件夹中不存在的error.jpg。我的lazyload js是;

    $.fn.lazyload = function(options) {
    var elements = this;
    var $container;
    var settings = {
        threshold       : 0,
        failure_limit   : 0,
        event           : "scroll",
        effect          : "show",
        container       : window,
        data_attribute  : "original",
        skip_invisible  : false,
        appear          : function(ele,settings)
        {
            $(ele).attr("src",$(ele).attr("data-original"));
        },
        load: null,
        placeholder     : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"
    };

这里我只给出了js文件的一部分。

但是当页面看到时，显示相同的占位符图像（空）而不是我的'no-image.jpg'

Answer 1

你可以这样写;

  $("img.lazy").lazyload({
            placeholder     : "img/no-image.jpg"
        });

或者你可以使用this site转换为base64图像并像这样写;

   $("img.lazy").lazyload({
        placeholder     : "data:image/gif;base64,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"
    });

延迟加载的错误图像

1 个答案: