Jquery 延迟加载无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16868694/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Lazy Loading not working properly
提问by HymanRoster
I'm trying to implement a jQuery technique called lazy loading . The goal I'm trying to achieve is I want the page to load without waiting for all the images request so , I want the page to load first with CSS, etc., and let the images load slowly.
我正在尝试实现一种称为延迟加载的 jQuery 技术。我试图实现的目标是我希望在不等待所有图像请求的情况下加载页面，因此，我希望页面首先使用 CSS 等加载，并让图像缓慢加载。
The issue I'm facing here is, it waits for all the image requests before the page is loaded which is the opposite of the concept of lazy loading. Can someone help me?
我在这里面临的问题是，它在页面加载之前等待所有图像请求，这与延迟加载的概念相反。有人能帮我吗？
<html>
<head>
<link rel="stylesheet" href="css/float.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js" type="text/javascript"></script>
<script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(function(){
$("img.lazy").lazyload();
});
});
</script>
</head>
<img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://wannabeyummymummie.files.wordpress.com/2013/01/beach.jpg?w=300&h=187" width="400" height ="400"/>
<br>
<img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://farm9.staticflickr.com/8349/8225268620_4e00a8f603_m.jpg" width="400" height ="400"/>
<br>
<img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://farm9.staticflickr.com/8338/8224516167_bc7a5f6699_m.jpg" width="400" height ="400"/>
<br>
<img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://farm9.staticflickr.com/8199/8219175940_effa3f66ca_m.jpg" width="400" height ="400"/>
<br>
<img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://farm9.staticflickr.com/8490/8215600456_de252d155d_m.jpg" width="400" height ="400"/>
<br>
回答by Barmar
You're not using the plugin properly. Read the documentation, you're supposed to put the URL of the image in the data-originalattribute. The srcattribute should contain the URL of a dummy image that's used for all the items until they load the real image.
您没有正确使用插件。阅读文档，您应该将图像的 URL 放在data-original属性中。该src属性应包含用于所有项目的虚拟图像的 URL，直到它们加载真实图像。
<img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://wannabeyummymummie.files.wordpress.com/2013/01/beach.jpg?w=300&h=187" width="400" height ="400"/>
Also, as the other answers pointed out, you need to call the plugin from the document ready handler.
此外，正如其他答案所指出的，您需要从文档就绪处理程序调用插件。
jQuery(document).ready(function ($) {
$("img.lazy").lazyload(
{ data_attribute: "orig"
});
});
The data_attributeoption tells the plugin what data-XXXattribute to find the real URL in. It defaults to data-original, the above option changes it to data-origto match the mistaken HTML I gave you.
该data_attribute选项告诉插件在哪个data-XXX属性中查找真实 URL。它默认为data-original，上面的选项将其更改data-orig为匹配我给你的错误 HTML。
回答by Fallexe
Wrap your script in the onload function so that it does not execute until the page is loaded.
将您的脚本包装在 onload 函数中，以便它在页面加载之前不会执行。
$(function() {
$("img.lazy").lazyload();
});
回答by PSL
Place your script under document.ready. SO that your $("img.lazy")is executed after the document is loaded and just when the image tags are available in DOM.
将您的脚本放在 document.ready 下。以便您$("img.lazy")在文档加载后和图像标签在 DOM 中可用时执行。
$(function(){
$("img.lazy").lazyload();
});
easiest way you can find this out is place an alert or console.log just before $("img.lazy").lazyload();i.e
您可以找到这一点的最简单方法是在$("img.lazy").lazyload();ie之前放置一个警报或 console.log
<script>
console.log($("img.lazy").length); // this will log 0
$("img.lazy").lazyload();
</script>
