Question

我有一个网站的索引页面，我在砌体库中有很多图像。现在它的加载速度有点慢，我正在尝试使用lazyload和unveil。最初，我尝试了lazyload，但我需要保持宽度比例，所以我选择了 unveil.js

然而，在尝试实施揭幕后，我发现我的图像根本没有加载。以下是我的标记示例：

<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css"></style>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" /> 
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="Peter Lum Fluid.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<script src="Snap.svg-0.1.0/dist/snap.svg-min.js"></script>
</style>   
<script> window.jQuery || document.write('<script src-"jquery-1.9.1.min.js"><\/script>')  </script>
<title>Peter Lum</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="jquery.unveil.js" type="text/javascript"> </script>
<script>
$(document).ready(function() {
  $("img").unveil();
 });

$(function(){
    $("img").unveil();
});



$("img").unveil(200, function() {
$(this).load(function() {
this.style.opacity = 1;
});
});

</script>



<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1"><!--Use Insert Panel for additional Fluid Grid Layout Div tags. Note: All Layout Div tags must be inserted directly inside the "gridContainer" div tag. Nested Layout Div tags are not currently supported.-->
<header>
    <a class="logo" href="mailto:hello@peterlum.co"></a>


    <h1> Peter Lum </h1>

 <hr>
        <ul class=" navigation scaling">
             <li class="scaling"><a href="about.html"><img class="invert" src="images/about.png"></a></li>
             <li class="scaling"><a href="index.html"><img class="invert" src="images/work.png"></a></li>
             <li class="scaling"><a href="contact.html"><img class="invert" src="images/contact.png"></a></li>
             <li class="scaling"><a href="http://www.peterlum.co/blog"><img class="invert" src="images/blog.png"></a></li>
             <li class="scaling"><a data-pin-do="buttonFollow" href="http://www.pinterest.com/peterlunglum/pins/"><img class="invert" src="images/pinterest nav.png"></a></li>
    </ul>
    <hr>


</header>
</div>

<div id="LayoutDiv2" class="container">

     <div class="box">
         <div class="article">
            <img alt="Atelier" class= "thumbnail img lazy" src="images/blank.png" data-src="images/Atelier-2.png"><h4>A Shop of Work</h4>
              <p> <a class="" href="#">Read more »</a></p>
         </div>
     </div>

</div> 
<!-- /container -->

<div id="backtotop"></div>



  <div class="footer">
     `enter code here`  <p> Work of Peter Lum. Thanks for visiting. Website designed myself using Masonry. ©2014.</p>
  </div>

 <!-- jQuery library -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

 <script type="text/javascript">
 $(function() {
$(window).scroll(function() {
    if($(this).scrollTop() != 0) {
        $('#backtotop').fadeIn();   
    } else {
        $('#backtotop').fadeOut();
    }
});

$('#backtotop').click(function() {
    $('body,html').animate({scrollTop:0},900);
  });   
 });
</script>
<script src="jquery.js"></script>
<script src="jquery.masonry.min.js"></script>
<script src="base.js" type="text/javascript"></script>
<script language="JavaScript" src="jquery-1.4.3.min.js"></script>
</body>
</html>

到目前为止，我只包含了一个图片div。任何人都可以告诉我为什么它不在layoutdiv2中加载我的图像？ unveil的文档说unveil的用法有这样的语法：

 <img src="bg.png" data-src="img1.jpg"/>

我是否必须遵循其确切的语法才能正常工作？而且，这只是问题还是其他错误？

Answer 1

首先在你的CSS上你必须写

＆＃13;

img {
  opacity: 0;
  transition: opacity .3s ease-in;
}

＆＃13;

然后你可以运行插件

＆＃13;

$("img").unveil(200, function() {
  $(this).load(function() {
    this.style.opacity = 1;
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/unveil/1.3.0/jquery.unveil.min.js"></script>

＆＃13;

但是因为这个插件是jQuery依赖项，你可以用this.style.opacity = 1;

更改$(this).css( { 'opacity': 1} );

现在，在<img>标记上，您可以使用自定义属性，例如data-src="img2.jpg" data-src-retina="img2-retina.jpg"

揭开和懒惰的负荷

1 个答案: