我的图片没有使用延迟加载显示答案

【问题标题】：my picture are not displayed using lazy load我的图片没有使用延迟加载显示
【发布时间】：2013-08-11 09:01:30
【问题描述】：

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

但我仍然有问题，我不知道可能是什么原因，但根本没有显示 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">

【问题讨论】：

为什么您的图片名称中有空格？这可能是问题所在，您使用了错误的路径！
不，当我使用 src 而不是 data-original 时，img 正在工作
哎呀，我没有发现真正的问题，因为“图像命名”挡住了我的视线，我认为 @Vadim 刚刚解决了您的问题。但我仍然认为你必须修复空白的东西，因为它无效并且被认为是一种不好的做法，特别是当你在 src 中使用它时，请参阅This answer

标签： javascript load lazy-evaluation

【解决方案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> 已经在文档中之后执行，因此可以通过 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

【讨论】：

我知道了这个函数，但是没有这个函数它也不起作用。并且不知道将函数传递给jQuery是什么意思我该怎么做？抱歉，工作示例不清楚:(
$(...) 是 jQuery(...) 的别名。将函数传递给jQuery 意味着$(function(){...}) 与jQuery(function() {...}) 和jQuery(document).on('ready', function() {...}) 的简写相同 - 实际上将您的回调函数绑定到文档的就绪事件。
我把代码放在了正文的最后，但还是不行，不知道是什么问题。 :(
@NajlaJubran 你看看控制台吗？是否有任何错误阻止 JavaScript 的其余部分运行？您确定已加载 jQuery 和插件吗？顺便说一句，我已经用第二种方法的例子更新了帖子。
GET 127.0.0.1:8080/Img_loading/public/jquery.js 404 (Not Found) pic.php:7 Uncaught ReferenceError: jQuery is not defined jquery.lazyload.js:227 Uncaught ReferenceError: $ is not defined pic.php:23跨度>

【解决方案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

【讨论】：