jQuery滚动加载图片效果的实现_jquery

复制代码 代码如下:

<BR>/****************滚动加载图片函数****************/
     function scrollLoading(){
         var st = $(window).scrollTop(), sth = st + $(window).height();
         var $targetpics = $("img.scrloadpic");
         var len = $targetpics.length;
         for(var i=0; i< len; i++)
         {
             var $temppic = $targetpics.eq(i);
             var post = $temppic.position().top;
             var posb = post + $temppic.height();

             if((post > st && post < sth) || (posb > st && posb < sth))
             {

                 var url = $temppic.attr("xsrc");
                 if(url != "")
                 {
                    $temppic.attr("src", url);
                    $temppic.attr("xsrc", "");
                 }
             }
         }
     }

 上面是实现滚动加载的一个功能函数;下面在html代码中需要在img中加一个xsrc属性暂时存放真实图片的路径,src中则存放loading图片的路径,为每个需要实现这个功能的图片加一个名字为“scrloadpic”的类。

复制代码 代码如下:

<img src="load.gif" xsrc="myimgae.jpg" class="scrloadpic"/>

 最后在调用函数。

复制代码 代码如下:

scrollLoading();
$(window).bind("scroll", scrollLoading);

时间: 2024-10-31 18:02:01

jQuery滚动加载图片效果的实现_jquery的相关文章

jquery 预加载图片效果插件与实例

文章一款告诉你如何利用jquery 预加载图片的实例教程,同时你也可以根据它出制作出漂亮的jquery 预加载图片效果哦. <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x

jQuery滚动加载图片实现原理_jquery

本文主要通过以下几方面来说明懒加载技术的原理,个人前端小菜,有错误请多多指出 一.什么是图片滚动加载? 通俗的讲就是:当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来.这就是图片懒加载. 二.为什要使用这个技术? 比如一个页面中有很多图片,如淘宝.京东首页等等,如果一上来就发送这么多请求,页面加载就会很漫长,如果js文件都放在了文档的底部,恰巧页面的

jQuery/JavaScript 实现的异步加载图片效果

在上代码之前先说一下简单的原理,我们知道在 img 标签中的 src 属性是指向图片地址,要实现异步加载,就先暂时不给 src 属性赋值,而是先找个中间变量的属性 data-src,把图片地址写在 data-src 属性里,然后当触发 onclick 事件的时候,把 data-src 的值复制给 src,也就实现了异步加载. 代码时间到,因为无论是 jQuery 还是 JavaScript 的方法,HTML 的结构是相同的,如下:  代码如下 复制代码 <div id="box"

jQuery预加载图片常用方法

  本文实例讲述了jQuery预加载图片常用方法.分享给大家供大家参考.具体如下: 方法1: ? 1 2 3 4 5 6 7 8 9 10 11 $.preloadImages = function() { for (var i = 0; i<arguments.length; i++) { img = new Image(); img.src = arguments[i]; } } $.preloadImages ( "path_to_image_array", "p

jquery预加载图片的方法

  本文实例讲述了jquery预加载图片的方法.分享给大家供大家参考.具体如下: 这段代码可以在页面打开前对图片进行预加载,这个函数非常有用,可以给用户带来更好的体验. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 function preloadImages(oImageList, callback) { if ( typeof (oImageList) == 'object' && t

jquery滚动加载数据的方法

 这篇文章主要介绍了jquery滚动加载数据的方法,实例分析了jQuery动态加载数据的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了jquery滚动加载数据的方法.分享给大家供大家参考.具体分析如下: 我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览.这种技术我暂且称它为滚屏加载技术,我们发现很多网站用到这种技术,例如新浪微博.QQ空间等. 代码如下: 代码如下: <!DOCTYPE=html> <html>

jquery预加载图片的方法_jquery

本文实例讲述了jquery预加载图片的方法.分享给大家供大家参考.具体如下: 这段代码可以在页面打开前对图片进行预加载,这个函数非常有用,可以给用户带来更好的体验. function preloadImages(oImageList, callback) { if ( typeof (oImageList) == 'object' && typeof (callback) === "function") { var iCallbackAfter = oImageList

jQuery预加载图片常用方法_jquery

本文实例讲述了jQuery预加载图片常用方法.分享给大家供大家参考.具体如下: 方法1: $.preloadImages = function() { for (var i = 0; i<arguments.length; i++) { img = new Image(); img.src = arguments[i]; } } $.preloadImages ( "path_to_image_array", "path_to_image_array", &q

jquery滚动加载数据的方法_jquery

本文实例讲述了jquery滚动加载数据的方法.分享给大家供大家参考.具体分析如下: 我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览.这种技术我暂且称它为滚屏加载技术,我们发现很多网站用到这种技术,例如新浪微博.QQ空间等. 代码如下: 复制代码 代码如下: <!DOCTYPE=html> <html> <head> <script src="js/jquery.js" type="text