我正在尝试实现一种称为延迟加载的jQuery技术.我想要实现的目标是我希望加载页面而不等待所有图像请求,因此,我希望页面首先加载CSS等,并让图像加载缓慢.
我在这里面临的问题是,它在页面加载之前等待所有图像请求,这与延迟加载的概念相反.有人能帮我吗？
<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>
Bar*_*mar 11
您没有正确使用该插件.阅读文档,您应该将图像的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"/>
另外,正如其他答案所指出的那样,您需要从文档就绪处理程序中调用插件.
jQuery(document).ready(function ($) {
$("img.lazy").lazyload(
{ data_attribute: "orig"
});
});
该data_attribute选项告诉插件data-XXX找到真实URL的属性.默认情况下data-original,上面的选项将其更改data-orig为匹配我给你的错误HTML.