`
sun810
  • 浏览: 5811 次
  • 性别: Icon_minigender_1
  • 来自: 南京
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

图片根据鼠标滚动延时加载

阅读更多
最近研究了京东商城用jQuery的实现如下:
就是默认地址赋给img标签的src2属性,显示时赋给src属性值。
function lazyload(option) {
    var settings = {
defObj: null,
defHeight: 0
    };
   
    settings = $.extend(settings, option || {});
    var defHeight = settings.defHeight;
    var defObj = (typeof settings.defObj == "object") ? settings.defObj.find("img") : $(settings.defObj).find("img");
    var pageTop = function() {
return document.documentElement.clientHeight + Math.max(document.documentElement.scrollTop, document.body.scrollTop) - settings.defHeight;
    };
   
    var imgLoad = function() {
defObj.each(function() {
    if ($(this).offset().top <= pageTop()) {
        var src2 = $(this).attr("src2");
//已显示的不用再显示
if (src2) {
                    //显示后,去掉src2属性
    $(this).attr("src", src2).removeAttr("src2");
}
            }
});
    };
   
    imgLoad();
    $(window).bind("scroll", function() {
        imgLoad();
    });
}

lazyload({
    defObj:".w1"
});
0
1
分享到:
评论

相关推荐

    jQuery实现鼠标滚动图片延迟加载效果附源码下载

    这里延迟加载的意思是,拖动滚动条时,在图片出现在浏览器显示区域后才加载显示。在这之前全部图片都由一张图片代替。节省流量,减轻服务器负担。 请用鼠标或者键盘方向键使页面向下滚动,注意图片的变化。本特效...

    JS图片根据鼠标滚动延时加载的实例代码

    2. **src2 属性**:在上述实例代码中,由于需要延迟加载图片,所以除了常规的src属性外,引入了一个自定义的src2属性。src2属性用于临时存储图片的真实地址。 3. **页面滚动事件**:页面滚动时,会触发window的...

    jQuery鼠标滚动页面图片延迟加载代码

    延迟加载图片"&gt; ``` 在这里,`data-src`属性存储了真实图片的URL,`class="lazy"`标记了需要延迟加载的图片。 3. **编写JavaScript**:创建一个jQuery函数,监听滚动事件,并判断图片是否在视口内。如果在,...

    鼠标放置图片滚动特效

    7. **图片加载优化**:为了提高页面加载速度,可以考虑使用延迟加载(lazy loading)技术,只有当图片进入视口时才开始加载,这样可以减少初次加载时的网络负担。 8. **兼容性测试**:在实现特效后,应进行跨浏览器...

    react-Reactwaterfall高性能无限滚动下拉加载

    2. **延迟加载**:为了避免频繁地触发加载事件,可以设置一个阈值,只有当用户滚动距离超过这个阈值时才开始加载。 3. **状态管理**:React组件需要管理当前加载的数据和状态,如是否正在加载新数据、已加载的数据...

    图片的延迟加载

    图片延迟加载,也被称为懒加载(Lazy Loading),是一种优化网页性能的技术。在网页设计中,尤其是在内容丰富的网站或社交媒体平台上,大量的图片会显著增加页面的加载时间,这可能导致用户流失。为了解决这个问题,...

    jQuery鼠标滚动图片.zip

    《jQuery鼠标滚动图片:打造动态视觉盛宴》 在网页设计中,吸引用户的注意力并提供良好的交互体验至关重要。jQuery鼠标滚动图片技术就是一种实现这一目标的有效手段。它将传统的静态图片展示转变为动态的、响应用户...

    无刷新联级,滚动条滚动加载数据

    同时,通过监听鼠标滚轮事件,实现滚动加载,使数据加载更加平滑自然。而"WebCombo"这样的工具则为开发者提供了实现这些功能的便利。在实际开发中,理解和掌握这些技术,可以显著提升网站的性能和用户满意度。

    模仿百度图片加载.zip_图片加载_百度图片加载

    6. **延迟加载**:对非首屏图片,设置一个合适的延迟时间,等待用户停顿后再加载,减少不必要的网络请求。 7. **优先级加载**:根据图片的重要性或与用户的交互程度,设定不同的加载优先级。例如,用户鼠标悬停的...

    wpf 图片查看器,支持鼠标滚动缩放拖拽

    10. **性能优化**:对于大量图片的查看,可能需要考虑内存管理和加载策略,如延迟加载(Lazy Loading)、预加载(Preloading)等,以提高程序性能并减少内存占用。 综上所述,创建一个支持鼠标滚动缩放和拖拽的WPF...

    鼠标滚动至底部展示内容

    标题“鼠标滚动至底部展示内容”涉及到的是网页交互设计中的一种常见功能,即无限滚动或称为滚动加载。这种设计允许用户在浏览页面时,当滚动到页面底部时自动加载更多内容,无需点击“加载更多”按钮。这在数据量大...

    图片根据鼠标滑动特效.zip

    "图片根据鼠标滑动特效.zip" 提供的是一种解决方案,它利用JavaScript(JS)实现了一个图片滚动展示的特效,使得长图能够在用户鼠标滑动时动态加载,既节省了页面空间,又保证了图片的完整呈现。这种技术被称为...

    原生Js页面滚动延迟加载图片实现原理及过程

    原生JavaScript页面滚动延迟加载图片的实现原理和过程是现代Web开发中常用的一种技术,目的是提升页面加载性能和用户体验。该技术涉及页面滚动事件的监听、元素位置的计算、图片资源的异步加载等方面。下面详细解释...

    【ZT】图片延迟加载 jquery.lazyload插件

    jQuery Lazyload插件通过监听滚动事件,判断图片是否进入视口,如果进入则加载图片,通常还会结合CSS进行优化,比如初始时设置图片为透明或占位符,加载完成后再显示真实图片。 在实际应用中,使用jQuery Lazyload...

    vue elementUI table表格数据 滚动懒加载的实现方法

    - 延迟加载:设置一个阈值,当接近底部时才开始加载更多数据,避免频繁请求。 - 数据预加载:在用户滚动之前预测并加载即将进入可视区域的数据。 8. **错误处理与用户体验**: 在处理滚动加载时,应考虑网络延迟...

    浅谈selenium如何应对网页内容需要鼠标滚动加载的问题

    在使用Selenium进行网页自动化测试或网页数据抓取时,经常会遇到一种情况,即网页内容不是一次性全部加载,而是需要用户滚动页面时才逐步显示。这种情况通常被称为“懒加载”或者“无限滚动”。本文将详细讲解如何...

    jQuery选项卡切换图片异步加载代码.zip

    在实际应用中,还可以根据需求进一步优化,比如添加图片加载进度提示、错误处理机制、图片懒加载库(如lozad.js或lazysizes)等。理解并掌握这种技术,对于提升网页性能和用户体验具有重要意义。

Global site tag (gtag.js) - Google Analytics