问题标签 [image-preloader]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
3247 浏览

javascript - 无懈可击的 Javascript 图像预览

我有以下代码向用户展示他们尝试上传的图像的预览,并且在 FF 中运行良好:

问题是,getAsDataURL()仅适用于 FF。Chrome 中的这种功能是否有类似的/解决方法(特别是)?

0 投票
3 回答
391 浏览

javascript - 检测是否加载了对象 [Javascript]

我想知道,有没有办法检测是否加载了某个图像/ div?例如,当我加载两个重图像并在图像稍后将占据的两个位置显示加载标志时,有没有办法在加载第二个图像时已经显示第一个图像?

0 投票
2 回答
3634 浏览

jquery - jQuery 图像预加载/缓存停止浏览器

简而言之,我有一个非常大的照片库,并且我正在尝试在第一页加载时尽可能多地缓存缩略图。可能有 1000 多个缩略图。

第一个问题——尝试预加载/缓存这么多是愚蠢的吗?

第二个问题——当preload()函数触发时,整个浏览器停止响应一到两分钟。此时回调触发,因此预加载完成。有没有办法在尝试加载这么多对象时完成不妨碍用户体验/速度的“智能预加载”?

$.preLoadImages函数取自这里:http ://binarykitten.me.uk/dev/jq-plugins/107-jquery-image-preloader-plus-callbacks.html

这是我实施它的方式:

1000张图片很多。我要求太多了吗?

0 投票
1 回答
351 浏览

jquery - 为什么这种用 jQuery 预加载图像的尝试不起作用?

目前我有这个代码:

但是,它的行为非常奇怪。通常,我没有收到警报框。但是,如果我打开开发人员工具并暂停脚本执行,我会收到一条警告,上面写着0. 没有什么能比得上一只好的老黑森虫了!

可以在这里找到一个活生生的例子。脚本本身被调用style.js,很明显图像已经加载。

我是在做一些愚蠢的事情,还是 jQuery 在发挥作用?

0 投票
3 回答
1285 浏览

jquery - 使用 jQuery 预加载图像

我在 Nettuts 上的教程评论(由 James 撰写)之后得到了这段代码,我想实现它。

预加载图像的教程方法很冗长,但我喜欢 James 的缩短版本,但是,我尝试过实现它,但我没有做对。

看来我需要先设置我的数组,循环遍历该数组,然后创建图像对象并加载它们。然而,当我检查我的 Firebug 时,我没有看到任何图像加载到缓存中。

我会很感激帮助!

0 投票
2 回答
2214 浏览

javascript - 如何预加载大尺寸图像?

我有某些链接,当鼠标悬停在这些链接上时,我正在更改<div>背景图片

我用过的jQuery是-

它工作正常但问题是当我在服务器图像上运行它时需要 3-4 秒才能更改更改,但是我第二次将鼠标悬停在图像上时会立即更改,我认为这是因为浏览器存储图像缓存。所以我添加了一个 javascript 来在 onLoad() ivent 页面上预加载图像 -

<body onLoad="javascript:preloader()">

但是这个脚本并没有解决我的问题。我该怎么办?

0 投票
1 回答
2051 浏览

javascript - 获取 javascript 预加载图像的大小

我正在尝试将服务器上生成的许多图像预加载到一个小型网站。预加载使用 setWindowTimeout 完成并使用 Image 对象,设置 onload 回调,然后应用新的请求 uri。

对于某些请求,服务器可能必须发出信号表明图像“未更改”,而我正在通过发送一个小的 1x1 像素 gif 来做到这一点(似乎我需要发送一个实际的图像,返回空内容将导致 Image 对象不开火)。在我的 onload 处理程序中,我想确定获取图像的大小,然后确定是否应该使用给定图像更新视觉图像。

下面是我当前解决方案的一个片段(输出是一个帮助调试的 div):

我似乎有两个问题:

a)第一次调用函数时 imgObj.complete 为假,但只调用一次(因此我将其注释掉)和

b)加载时我似乎无法依赖图像的宽度或高度属性。从我获取 1x1 像素的测试中,它有时会读出 50,这在创建新 Image() 时似乎是默认值,有时它会读出正确的大小 1。

我的最终目标是拥有一小块 javascript 逻辑,它定期向服务器查询新图像,如果没有发生任何新情况(1 像素图像)或加载新图像,则什么也不做。我可能在这里做错了,或者忽略了重要的属性或调用,所以我很高兴收到反馈。

编辑:根据 mplungjan 的建议,我改为预加载到一个隐藏的 div 中,这帮助我解决了问题 b)。仍然没有解决问题a)的方法;报告完成 = false 一次并且不再调用

0 投票
3 回答
182 浏览

javascript - 不知道如何使用预加载的图像制作脚本

有人可以看看这个并告诉我我必须做什么才能让图像显示出来吗?

0 投票
3 回答
2158 浏览

javascript - 使用 jQuery 预加载图像

我知道这是一个热门话题,而且我知道以前有过相同标题的问题,但是我尝试了所有方法,但有些东西无法正常工作。出于某种原因,我的 Firefox 不会预加载图像。图像会在 IE7/8 和 Chrome 中预加载(应该如此)。但不是在 Firefox 中。

编辑:

我创建了一个新的 Fiddle: http: //jsfiddle.net/Z2W7r/ 如果有人可以修改它并添加正确的 jQuery 或 Javascript 代码来使图像预加载,我将不胜感激。


我什至在使用以下插件:

}

并这样称呼它:

所以...有谁知道为什么这个脚本(或任何脚本)不能只在 Firefox 中运行?如果需要,我可以提供该网站的地址。

0 投票
1 回答
952 浏览

apache-flex - flex 4.1 s:List:如何强制列表加载所有项目,而不仅仅是可见项目?

我正在 flex 中创建一个 facebook 应用程序。我实际上正在开发朋友组件,该组件显示正在使用该应用程序的朋友。现在,每个朋友都有一个头像。

我使用 as:List 元素创建了组件。

在元素的 Skin Class 中,我将 requestedColumnCount 配置为 3,这意味着它显示了 3 个朋友。我添加了在列表中左右滚动的按钮。

每当我滚动查看不同的朋友时,有半秒钟我看不到图像,因为 List 组件正在加载图像以查看它。

有没有办法让列表预加载所有元素,这样我就不会遇到这种问题了?