网页中有时候需要获得图片的宽度和高度,来定义某些大小,可是这个是需要从服务端请求图片,下载到本地才能够得到的,有些js或者jquery代码在还没有加载完图片时就执行了。怎么办呢?
jquery提供一个方法:
复制代码 代码如下:
01.$("").load(function(){...});
其中选择器是图片的id或class,function里面的方法就是回调函数,在图片加载完成后执行,但是我试验了很多,压根儿不是那么回事,正确的解决方法是:
用js的onload方法:
复制代码 代码如下:
document.getElementById("").onload = function() {};
实验结果是可行的。
========================================
刚才查了一下jquery的api,发现event->document loading->load是deprecated的。
查了一下, 有人说可以使用以下方法:
$("selector").on("load", function() {
// ...
});
试了一下确实可以。
好像是为了跟jquery的ajax里的load()方法区分开, 所以才不建议使用上面的load()..
=============================================
2/28更新
今天发现似乎load方法不适用于DOM, 只能用于img节点。
如果想要某一个DOM被建立之后便立刻执行脚本,需要用到ready().
这两个方法都在jquery API里的document loading里面。
分享到:
相关推荐
其中选择器是图片的id或class,function里面的方法就是回调函数,在图片加载完成后执行,但是我试验了很多,压根儿不是那么回事,正确的解决方法是: 用js的onload方法: 代码如下: document.getElementById(“”)....
下面小编给大家整理了几种关于JS判断图片是否加载完成方法汇总,一起看看吧。 一、load事件 [removed] $('img').onload = function() { //code } [removed] 优点:简单易用,不影响HTML代码。 缺点:只能指定一...
本文将详细讲解如何使用jQuery来实现这一功能,尤其关注鼠标滚动时的图片加载效果。 首先,jQuery是一款广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画制作等任务。在实现图片动态加载时,我们主要利用...
使用jQuery监听滚动事件,判断图片是否进入视口。一旦图片位于视口内,就将其`src`属性替换为`data-src`中的真实URL,实现图片的延迟加载。 ```javascript $(document).ready(function() { $('.lazy').lazyload...
通常会有一个主JS文件,如`lazyload.js`,里面包含了上面描述的逻辑,如滚动事件监听、判断图片是否在视口内以及替换图片源等操作。 **优化与扩展** - **预加载**:除了按需加载,也可以预先加载用户可能很快会...
在这个示例中,当页面加载完成后,所有带有 `lazy` 类的图片都会被 jQuery Lazy 插件监控,并在进入视口时自动替换 `data-src` 属性为 `src`,触发图片加载。 **jQuery 懒加载 demo** 在你提到的 "js,jquery懒加载...
3. **计算图片位置**:通过JavaScript计算图片距离窗口顶部的距离,与窗口的可视高度进行比较,以判断图片是否进入可视区域。 4. **加载图片**:如果发现图片进入可视区域,将`data-src`属性的值赋给`src`属性,...
在这种情况下,可能需要采取其他策略来判断图片是否已经被缓存并决定如何处理。 以上就是使用JavaScript获取图片实际尺寸的基本方法和注意事项。通过理解这些知识点,我们可以在Web开发中更加灵活和准确地处理图片...
- **响应式设计**:考虑到不同设备的屏幕大小,可能需要调整判断图片是否在可视区域内的逻辑。 通过以上介绍,我们理解了jQuery实现图片延迟加载的基本原理和操作步骤。在实际项目中,根据具体需求,我们可以灵活地...
4. **图片替换**:JavaScript检测到图片进入可视区后,将"data-src"中的URL赋值给"src"属性,触发图片加载。 5. **加载动画**:在图片加载期间,可以显示一个加载动画,如"Loading"提示,提供更好的用户体验。 总之...
JavaScript,尤其是jQuery,用于处理图片的异步加载逻辑,包括监听事件、判断图片是否在视口内、请求图片数据以及插入到DOM中。 具体实现过程通常如下: 1. **HTML结构**:创建选项卡元素和图片容器,每个选项卡...
在jQuery中,我们可以使用`$(window).scroll()`函数来监听滚动事件,然后通过计算图片距离顶部的距离与窗口的高度来判断图片是否可见。 下面是一个简单的jQuery图片延迟加载实现步骤: 1. **设置数据源**:首先,...
在预加载图片的场景中,modernizr.js可以帮助我们判断浏览器是否支持某些特性,比如CSS3的`background-size`属性,这对于图片的预加载和显示至关重要。 接下来,我们来看看jQuery如何实现图片的预加载。预加载是...
它通过监听滚动事件,判断图片是否进入视口,如果在视口范围内,则开始加载图片。该插件具有以下特点: - **简单易用**:只需几行代码即可实现图片延迟加载。 - **高效性能**:插件对图片加载时机把握准确,避免...
**jQuery页面延迟加载技术实现源代码详解** 在网页设计中,优化用户体验是至关重要的,而页面延迟加载(也称为懒加载)技术就是一种有效的方法。它允许网页在初始加载时只加载可见区域的内容,当用户滚动页面时,再...
3. 在滚动事件的回调函数中,通过计算图片距离顶部的距离与窗口高度,判断图片是否可见,如果可见则替换"data-src"为"data-original",实际加载图片。 **Ajax方式加载页面**是另一种提高用户体验的技术,它允许后台...
而`jQuery无限滚动加载图片瀑布流代码`文件可能是实际的JavaScript代码,包含具体的实现逻辑,如初始化设置、滚动事件监听、新图片的请求和渲染等。 在实际应用中,这样的代码可以广泛应用于照片分享网站、电商产品...
以下是使用onload事件判断图片加载完成的示例代码: ```html (this)" src="" style='display:none'/> <script type="text/javascript"> function get(ts) { ts.style.display='block'; // 显示图片 } ``` **...