Tag: image preloader

在jQuery中在后台引入HTML资源

在页面上，有一个按钮。 单击该按钮时，会显示一个下拉列表。 下拉列表包含图像。 问题是在用户单击按钮之前不会获取图像。 $(“#my_button”).click(function(){ $(“#my_dropdown”).html(“”); }); 我想在页面加载时获取图像，以便在用户单击下拉列表时准备好。 我怎样才能做到这一点？ 我以为我可以使用display:none set将图像插入到页面中，所以它会进入缓存，或者有什么方法可以在jQuery中加载文档时加载？ 这适用于Chrome扩展程序，如果它有任何区别。 我想我可以将图像放在扩展中（这会更快），但我仍然很好奇是否可以使用JS加载图像。 谢谢，凯文

为什么尝试使用jQuery预加载图像不起作用？

目前我有这个代码： var imgCount = 36; var container = $(‘#3D-spin’); var loaded = 0; function onLoad() { alert(loaded); loaded++; if(loaded >= imgCount) { alert(‘yay’); } } for(var i = imgCount-1; i >= 0; i–) { container.prepend( $(”) .one(‘load’, onLoad) .attr(‘alt’, ‘View from ‘+(i*360/imgCount)+’\u00B0’) .attr(‘src’, ‘/images/3d-spin/robot (‘+i+’).jpg’) ); } 但是，它表现得非常奇怪。 通常，我没有警报框。 但是，如果我打开开发人员工具并暂停脚本执行，我会收到一条说0警报。 不像一个好老的heisenbug！ 这里有一个实例。 脚本本身称为style.js ，很明显图像已经加载。 我是在傻傻地做些什么，还是在玩jQuery？

等待图像加载，然后执行所有其他代码

好吧，我对此失去了理智。 我确实在这里阅读了SO和谷歌关于它，我甚至有预装置设置（在这里找到了SO），但我找到的插件/代码都没有帮助我。 我想要做的是：等到所有图像都预先加载，然后才执行所有其他javascript代码。 就我而言，它可以（但不是必须）有一个“加载……”的消息。 事实上，我在身体背景中有一个非常大的图像和另外两个也更大的图像，所以我想预加载它们，这样它们就会立即显示，并且不会有那种难看的“加载”图像效果。 这就是我现在使用的，但它并不好： $(document).ready(function() { preloadImages(); …some other code… function preloadImages(){ imagePreloader([ ‘images/1.png’, ‘images/2.jpg’, ‘images/3.png’, ]); } function imagePreloader(arrayOfImages) { $(arrayOfImages).each(function(){ (new Image()).src = this; }); } } 我不知道，也许我应该在.ready（）之外的某个地方调用这个预加载器？ 或者……那样，请帮忙…… 顺便说一句，是的，我也读过这篇文章，我不知道为什么，但.ready（）对我来说更快:( 编辑： 好的，最后我得到了这个工作。 我的问题？ 我把等待的div设置错了。 这是我现在的代码：我有加载div，我在上面显示所有图像，然后当所有图像加载时（使用$（window）.load（function（）{…}）;如我所建议，隐藏该div。 #loading { background-size: 100%; background-color:#000; width: 100%; height: 100%; margin: 0px; padding: 0px; z-index:999; } #waiting […]

javascript预加载器/进度/百分比

我很难找到关于如何使用文本告诉你百分比的javascript（或jquery）进度条的任何好信息。 我不想要插件，我只是想知道它是如何工作的，这样我就可以根据我的需要进行调整。 如何预加载图像并获取预加载图像数量的变量。 另外，如何根据已加载的图像数量更改html / css和/或调用函数？

使用jquery预加载图像数组

我正在使用jQuery从php数组构建一个图像数组。 我想循环遍历这些图像，在显示一点加载gif的同时预加载它们，直到所有图像都被加载。 目前，我尝试了很多这样做的方法，页面的其余部分似乎总是继续加载，因此图像正在预加载，但在页面加载其余内容之前不会。 这是我有的： // Get list of images and build array + set vars var imgArray = new Array; var imgCount = ; var imgNum = ; var imgDir = “”; var imgBlurDir = “”; $(document).ready(function() { <?php for ($i=0;$i // Preload Images: $(‘mainImg #orig’).html(”); for(i=0; i<imgCount; i++) { $('’).attr(“src”, imgDir+imgArray[i]).load(function() { $(‘.profile’).append( $(this) […]

如何预加载大尺寸图像？

我有一些链接，鼠标hover在那些链接上我正在改变 背景图像 我用过的jQuery是 – function imgchange() { $(‘.smenu li’).mouseover( function(){ var src = $(this).find(‘a’).attr(‘href’); $(‘.hbg’).css(‘background-image’, ‘url(‘ + src + ‘)’); $(this).find(‘hbg’).attr(‘title’, ‘my tootip info’); }); } 它工作正常，但问题是当我在服务器上运行它时需要3-4秒才能更改，但是我第二次将鼠标移到图像上时会立即更改，我认为这是因为浏览器存储了图像缓存。 所以我在页面onLoad（）ivent上添加了一个javascript来预加载图片 – function preloader() { heavyImage = new Image(); heavyImage.src = “images/soluinfo1.jpg”; heavyImage.src = “images/soluinfo2.jpg”; heavyImage.src = “images/soluinfo3.jpg”; heavyImage.src = “images/soluinfo4.jpg”; heavyImage.src = “images/soluinfo5.jpg”; heavyImage.src = “images/soluinfo6.jpg”; heavyImage.src […]