判断img元素图片是否加载完成

u011010407 2014-12-23 10:22:00

有一个需求.要求全图图片加载完成前.只能显示等待界面
即使全部空白.中间一个loading图片.

以前愚蠢的认为window.load事件就可以解决.但是好像跟图片没有关系.
又来我又给所有的img加上了load事件.问题又来了. 有很大一部分设备.他只是调用了一次.

请猿有支招啊.

...全文

719 3 打赏收藏转发到动态举报

写回复

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

u011010407 2015-06-07

打赏
举报

回复

使用 new image()，去判断。上面有一个是否客户端有缓存，和onolad事件的总和就是图片的所有的数量

u011010407 2015-01-08

打赏
举报

回复

引用 1 楼 zzgzzg00 的回复:

img.onload就可以阿图片加载完执行只执行一次是什么意思阿写在给img赋值前

onload在浏览器上的确有效. 有多少个img就会执行多少次.但是在手机上就会出现兼容问题.

似梦飞花 2014-12-23

打赏
举报

回复

img.onload就可以阿图片加载完执行只执行一次是什么意思阿写在给img赋值前

有时需要获取图片的尺寸，这需要在图片加载完成以后才可以。下面小编给大家整理了几种关于JS判断图片是否加载完成方法汇总，一起看看吧。一、load事件 [removed] $('img').onload = function() { //code } [removed] 优点：简单易用，不影响HTML代码。缺点：只能指定一个元素，javascipt代码必须置于图片元素的下方二、jquery方法 [removed] $(function(){ $('.pic1').each(function(

在项目开发中，我们往往会遇到一个页面需要加载很多图片的情况。我们可以一次性加载全部的图片，但是考虑到用户有可能只浏览部分图片。所以我们需要对图片加载进行优化，只加载浏览器窗口内的图片，当用户滚动时，再加载更多的图片。这种加载图片的方式叫做图片懒加载，又叫做按需加载或图片的延时加载。这样做的好处是：1.可以加快页面首屏渲染的速度；2.节约用户的流量。一.实现思路 1.图片img标签自定义一个属性data-src来存放真实的地址。 2.当滚动页面时，检查所有的img标签，判断是否出现在事业中，如果出现在视野中，继续进行判断，看齐是否被加载过了，如果没有加载，那就进行加载。判断图片元素是否处于浏

本教程将为大家全面介绍labelImg软件以及使用方法，并且教会大家如何标注自己的数据集。主要包括以下几方面内容：1.labelImg介绍2.labelImg安装3.labelImg单类标注4.labelImg多类标注5.labelImg注意事项

load事件 [removed] $('img').onload = function() { //code } [removed] 优点：简单易用，不影响HTML代码。缺点：只能指定一个元素，javascipt代码必须置于图片元素的下方 jquery方法 [removed] $(function(){ $('.pic1').each(function() { $(this).load(function(){ $(this).fadeIn(); });

图片延迟技术一般的思路 1.现将img元素对应的src路径设置为背景图片，而该img所对应的url路径存放在一个自设的属性中（以便进行src替换）。 2.获取卷轴的高度和窗口的高度 3循环需要延迟加载的img数组，获取img的高度，判断该元素是否在可视窗口内。若该元素在可视窗口内，则进行src替换一下为测试代码 html 代码如下: <style> .wrap { margin: 20px auto; width: 150px; } .wrap div { border: 1px dotted #E29808; height: 30px; line-height: 30px; margin

87,902

社区成员

224,615

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章