`

js 图片延迟加载

    博客分类:
  • js
 
阅读更多
图片延迟加载

------
需求场景:

对于长页面,如果有很多图片,则希望,当滚动到图片时才显示图片,

------
实现原理

一开始将 img 的 src 写在 alt 里,而 src 为空,从而不加载图片,
为 window 对象绑定 scroll 事件,当滚动时,检测 图片的位置,如果滚动到了图片则 将 从 alt 读值 写入 src,从而显示图片,

------
例子:

// 有待写

------

参考:http://87cool.com/article-469.aspx
分享到:
评论
1 楼 taoge2121 2011-06-23  
scroll 

相关推荐

    超级好用的js图片延迟加载插件

    EasyLazyload.js就是这样一个高效的JavaScript延迟加载插件,它的主要功能和特性包括: 1. **简单易用**:EasyLazyload.js的API设计简洁,使得开发者能够快速上手,轻松集成到项目中。只需少量代码,就可以实现图片...

    js图片延迟加载 一个很好的例子

    以下是一个简单的JavaScript延迟加载图片的示例: ```html <!DOCTYPE html> <title>JavaScript图片延迟加载示例 .lazy { width: 100%; height: auto; opacity: 0; /* 预加载过渡效果 */ transition: ...

    jquery图片延迟加载

    为了解决这个问题,开发人员引入了“图片延迟加载”技术,jQuery作为一款广泛使用的JavaScript库,提供了实现这一功能的强大工具。本文将深入探讨jQuery图片延迟加载的概念、优势以及实现方法。 **一、什么是图片...

    js图片延迟加载的实现方法及思路

    JavaScript 图片延迟加载,也称为懒加载(Lazy Loading),是一种优化网页性能的策略,它旨在减少页面初始加载时间,提高用户体验。当用户滚动页面时,只有进入可视区域的图片才会被加载,而不是一次性加载所有图片...

    lazyload.js图片延迟加载(懒加载)插件

    "lazyload.js图片延迟加载(懒加载)插件" 是一个JavaScript库,主要用于优化网页性能,特别是那些包含大量图片的页面。它实现了“懒加载”技术,即图片不会在页面加载时立即加载,而是在用户滚动到图片即将出现在...

    js图片延迟加载,亲测

    JavaScript 图片延迟加载,也称为懒加载(Lazy Loading),是一种优化网页性能的策略。它允许网页在用户滚动到可视区域之前不加载非重要的资源,如页面下方的图片。这种技术可以显著减少页面的初始加载时间,提高...

    图片延迟加载的jq

    jQuery.lazyload的工作原理是监听滚动事件,当用户滚动页面,即将或已经看到图片时,才开始加载图片。这样可以避免一次性加载所有图片导致的页面加载时间过长的问题,尤其是对于含有大量图片的页面,效果尤为显著。 ...

    js 图片延迟加载 lazy_ load 0.2

    JavaScript图片延迟加载(Lazy Load)是一种优化网页性能的技术,它允许网页在用户滚动到图片时才开始加载,而不是一次性加载所有图片。这种技术对于拥有大量图片的页面特别有用,可以显著减少页面初始加载时间,...

    jquery 图片延迟加载

    2. **初始化插件**:使用jQuery选择器找到所有的延迟加载图片,并绑定滚动事件。 3. **滚动检测**:当用户滚动页面时,检查图片是否已进入可视区域。 4. **加载图片**:如果图片在可视区域内,将`data-src`属性的值...

    JS图片延迟加载分析及简单的demo.docx

    JavaScript 图片延迟加载,也称为“懒加载”,是一种优化网页性能的技术,尤其适用于包含大量图片的页面,如购物网站、社交媒体平台等。该技术的主要目的是提高页面加载速度,提升用户体验,减少服务器压力,并且在...

    HTML延迟加载图片 html图片延迟加载技术大全.zip

    HTML延迟加载图片,也称为懒加载(Lazy Load),是一种优化网页性能的技术,它允许网页只在需要时才加载图片,而不是一次性加载所有内容。这种技术对于拥有大量图片的页面尤其有益,因为它可以显著减少页面的初始...

    js页面图片延迟加载特效.zip

    在网页设计中,提高用户体验和...总结来说,"js页面图片延迟加载特效"是一种高效优化网页加载速度的技术,通过JavaScript实现,能显著提升用户体验。通过理解和应用这些知识点,开发者可以创建更流畅、响应更快的网页。

    延迟加载js代码下载(包括页面延迟加载以及图片延迟加载)

    JavaScript延迟加载是通过监听滚动事件来实现的。当页面滚动到特定位置时,触发一个函数来加载所需资源。这可以通过监听`window.onscroll`或`window.addEventListener('scroll', callback)`实现。关键在于计算元素...

    Echojs延迟加载图片JavaScript微型库

    **Echo.js:一款高效实用的JavaScript延迟加载图片库** 在网页设计中,图片是不可或缺的元素,它们可以增强用户体验,但同时也可能导致页面加载速度变慢。为了优化网站性能,延迟加载(Lazy Loading)技术应运而生...

    【JavaScript】图片延迟加载方案2

    JavaScript中的图片延迟加载,也称为懒加载(Lazy Loading),是一种优化网页性能的策略。它旨在减少页面初始加载时间,提高用户体验,特别是在用户滚动页面时,只加载可视区域内的图片,而不是一次性加载所有图片。...

    图片延迟加载技术

    - **懒加载插件**:jQuery有多个延迟加载插件,如`lazyload.js`,它们通常提供更丰富的功能,如阈值检测、占位图等,进一步提升性能。 - **占位图**:在图片实际加载前,可以使用一个小尺寸的占位图或纯色背景,...

    js设置延迟加载

    ### js设置延迟加载 在现代Web开发中,为了提高用户体验并优化资源管理,开发者们常常会用到“延迟加载”(Lazy Loading)技术。本文将详细介绍如何使用JavaScript实现页面元素或功能的延迟加载,帮助读者更好地...

    JavaScript 封装的延迟加载技术示例 JavaScript 封装的延迟加载技术示例,可以用于加载容器、加载DIV以及加载图片等,可有效降低浏览器损耗,有兴趣可以尝试一番。

    JavaScript延迟加载技术是一种优化网页性能的重要策略,它允许我们按需加载资源,而不是一次性加载所有内容,从而减少了页面初始化时的负担,提升了用户体验。在这个示例中,我们将探讨如何使用JavaScript来封装延迟...

    网页图片延迟加载插件

    1. **JavaScript代码**:用于监听滚动事件、检测图片是否进入视口以及加载图片。 2. **CSS样式**:可能包含一些预加载占位符或者过渡效果,使得图片在加载过程中看起来更自然。 3. **HTML标记**:图片元素需要适当的...

    Fish整理图片延迟加载技术

    Fish可能是一个开发人员的名字,他/她整理了关于此主题的一些资料,包括一个名为`jquery.lazyload.js`的JavaScript库和一个`images`目录,后者可能包含用于演示延迟加载的图片样本。 首先,我们来看`jquery.lazy...

Global site tag (gtag.js) - Google Analytics