ajax加载更多和图片延时加载



//案例参考 http://www.woshipm.com/  左侧查看更多jQuery(document).ready(function($){
    var click_counter = 0;
    $(‘#pagination a‘).click(function(){
        $("#pagination a").addClass("loading").text("数据加载中...请稍后");
        if ( $("#pagination").hasClass("show") ){
            click_counter++;
            if(click_counter <= 4){
                $("#pagination").removeClass("show");
                $.ajax({
                    type: "POST",
                    data:"action=ajax_page",
                    url: $("#pagination a").attr("href"),
                    success: function(data){
                        result = $(data).find("#home-list .ft");
                        nextHref = $(data).find("#pagination a").attr("href");
                                // 渐显新内容
                                $("#home-list").append(result.fadeIn(800));
                                $("#pagination a").removeClass("loading").text("查看更多");
                                if ( nextHref != undefined ) {
                                    $("#pagination a").attr("href", nextHref);
                                } else {
                                // 若没有链接,即为最后一页,则移除导航
                                $("#pagination").remove();
                            }
                            window.mTipTimer = setTimeout("$(‘#pagination‘).addClass(‘show‘)",1000);
                        }
                    });
                return false;
            }else{
                window.location.href=$("#pagination a").attr("href");
            }
        }
    });
//end
    $(document).ajaxStop(function(){
        $("img.lazy, .lazy img, img.avatar").show().lazyload({
            effect: "fadeIn",
            failure_limit : 100,
            threshold : 200,
            skip_invisible : false
        });
    });
});
时间: 2024-10-27 05:30:14

ajax加载更多和图片延时加载的相关文章

jquery实现图片延时加载[转]

本文转自:http://www.cnblogs.com/wscdzl/archive/2012/09/03/2668838.html 原理: 通过 jQuery 插件 lazyload 使得在浏览器可见区域外的图片不会被加载,当图片被用户滚动到浏览器可见区域时图片才进行加载,有点类似使用 Google 搜索图片时的效果.很明显,通过使用图片延时加载可以提高页面的加载速度. 实现过程: 首先是引入jquery文件和插件文件.jquery文件在这里我就不再赘述了.下面我贴出插件文件,我们将该文件命名

jquery插件图片延时加载实例详解(转)

jquery插件图片延时加载实例详解 效果预览:http://keleyi.com/keleyi/phtml/image/index.htm 使用方法:1.导入JS插件 <script src="http://keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="http://keleyi.com/

jquery实现的图片延时加载插件

jquery实现的图片延时加载插件: 在很多网站尤其是图片站,都采用了图片延时加载效果,这样可以有效的减轻服务器的压力,有点自然不言而喻了,下面就和大家分享一个图片延时加载的插件,希望能够给大家带来一定的帮助. 代码如下: <script type="text/javascript"> (function( $ ){ $.fn.imglazyload=function( options ) { var o=$.extend({ attr:'lazy-src', contai

图片延时加载例子详解

有时候由于图片太大,我们需要一个友好的提示,提示用户图片正在加载中,那么以下通过引入jquery就能轻而易举的实现. demo下载地址:http://download.csdn.net/download/tjcyjd/8475549 其中需要3个js:jquery.min1.7.1.js.jquery.lazyload.js.image.lazyload.js 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//

jquery插件之lazyload图片延时加载功能

公司投票程序,页面图片较多,导致页面显示很慢,做的图片延时加载: 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>demo</title> </

图片延时 加载原理 及应用

关于 图片延时加载的基本理论: 当我们浏览一个页面时,我们有时候并不会看完一个网页的所有内容,那么我们在客户不浏览完所有内容的情况下,加载完所有的图片就会浪费流量,而且也会影响到网页的加载时间.为了解决这个问题,我们就设计了一种图片延时加载的机制,即当用户将页面快滑到图片的时候,我们开始加载图片,这样既省了流量,而且也不影响用户的体验 下面 我就多篇延时加载举一个例子 首先,我们创建所需的HTML标签及样式 <style type="text/css"> body, div

图片延时加载jquery.inview.js用法详解

我们在网站上总能见到这样的效果,若是有图片,图片都是先用loading加载一小段时间,然后紧接着出来要显示的图片,即效果如下: v2_loading.gif,几秒钟时间过渡到v2_pic_01_s.jpg这样,这就是图片延时加载. 具体实现技术如下: 1)引入jquery库文件: 2)引入jquery.inview.min.js文件: 3)html结构: <a href="http://q.wan.com" target="_blank" title=&quo

图片延时加载技术

同步延时加载页面延迟加载,即分屏显示,用户滚动页面,切换页面时显示当前屏幕的图片 原理:将img的地址暂时存在一个属性中,如data-original,而让src为空,等到鼠标滚动的时候,响应一个事件($(this).trigger('appear');),此时会把data-original中的地址取出来,放入src 1:引入jquery.lazyload.js,该js最好放在页面的最下面 2:给img添加延迟属性 如: <img class="lazy" src="/

IOS开发中如何解决TableView中图片延时加载

经常我们会用tableView显示很多条目, 有时候需要显示图片, 但是一次从服务器上取来所有图片对用户来浪费流量, 对服务器也是负担.最好是按需加载,即当该用户要浏览该条目时再去加载它的图片. - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath { UIImage *image = [self g