Question

我浏览了很多帖子，包括这里的

但我仍然有问题，我不是可能的原因，但img根本没有显示。

这是我的代码

<head>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="jquery.lazyload.js" type="text/javascript"></script>    
    <script>    
        function(){$("img.lazy").show().lazyload();}
    </script>        
</head>

<img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">
<img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">
<img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">
<img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">
<img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">
<img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">

Answer 1

在您调用layzyload插件的脚本中，您使用永远不会调用的匿名函数将其包装起来。如果您希望在加载页面HTML后运行它，则应将其传递给jQuery

以下脚本

function(){$("img.lazy").show().lazyload();}

应该是

$(function(){
    $("img.lazy").lazyload();
});

以下是一个工作示例http://jsbin.com/uberoh/1/edit

另一个更简单的选择是将<script>$("img.lazy").lazyload();</script>从文档的head移到body的末尾。在这种情况下，脚本将在所有<img>已经在domcument中后执行，因此可由jQuery选择器$("img.lazy")

访问

<强> HTML

<body>
    ...
    <img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">
    <img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">
    <img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">
    <img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">
    <img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">
    <img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">
    ...
    <script>$("img.lazy").lazyload();</script>
</body>

上面代码的工作示例请参见此处http://jsbin.com/uberoh/3/edit

Answer 2

如果你问我，更容易避免使用插件并自行进行延迟加载。

您的图片应采用以下格式：

<img id="lazyimg123" src="loading.gif" data-img="http://bigimagehere.jpg" />

在某些事件触发后（滚动，点击，等等）更改图像属性：

var whichimage = "#lazyimg123"; // find some specific image
$("[id^=lazyimg]").attr({
    'src' : $(whichimage).data("img")
});

这应该让你开始。您只需更改图像属性，图像就像魔法一样加载。

我在http://ProductInterest.com

使用此方法

我的图片不会使用延迟加载显示

2 个答案: