延迟加载图片

<script type="text/javascript">
/**延迟加载商品图片***/
$(document).ready(function() {
       $("img").each(function(){
          var im = $(this);
            /**自适应大小***/
            var obj = new Image();//构建新的图片
            obj.src = im.attr('data-url');
            $(this).height($(this).width());
            obj.onload = function (){
                var width = 100;
                var img_width = obj.width;//图片宽度
                var height = obj.height;//图片高度
                var ratio =0;
                //alert(width + ':'+ img_width+":"+height);
                if(img_width>=width){
                    ratio = width/img_width;
                    im.attr("width",width);
                    im.attr("height",height*ratio);
                    im.attr("src",obj.src);
                }
            }
       });
       
       
});     
</script>

 

<ul>
        <c:if test="${not empty items }">
                  <c:forEach items="${items}" begin='0' end='4' var="item" >
                           <li class="info"><img src="${pageContext.request.contextPath}/images/xx.png" data-url="${item}"  /></li>
                   </c:forEach>
       </c:if>
</ul>