Question

我试图使用http://ressio.github.io/lazy-load-xt/ js库使用jquery mobile进行延迟加载图像，在某些情况下它不起作用，当我使用$ .getJSON函数插入图像然后延迟加载不起作用。

我的代码：

<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../libs/jquery-mobile/jquery.mobile-1.3.2.css">
<link rel="stylesheet" href="css/style.css">
<script src="../libs/jquery/jquery.js"></script>
<script src="../libs/jquery-mobile/jquery.mobile-1.3.2.js"></script>  
<link rel="stylesheet" href="../dist/jquery.lazyloadxt.spinner.css">
<script src="../dist/jquery.lazyloadxt.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>

function lazy(){

var url = "https://api.flickr.com/services/rest/?method=flickr.people.getPhotos&  api_key=008f6dbb151fa0d6afdacea3ff6ef51f&user_id=125323824@N04";
var srcc;
$.getJSON(url + "&format=json&jsoncallback=?", function(data){
$.each(data.photos.photo, function(i,item){

    srcc = "http://farm"+ item.farm +".static.flickr.com/"+ item.server +"/"+ item.id +"_"+ item.secret +"_m.jpg";  
    $('#one').append('<img data-src="'+srcc+'"  title="'+item.id+'"   />');                                 // not working 

  });
}); 

}


</script >



</head>
<body onLoad="lazy()">
<div data-role="page" id="page1">

    <div data-role="content" id="one">

 <!-- <img data-src="http://lorempixel.com/300/200/city/1" width="300" height="200">  -->
 <!--  lazy loading Image working  fine -->

    </div>

 </div>
 </body>
 </html>

使用$ .getJSON延迟加载不能使用jquery mobile

0 个答案: