标签: image-preloader

我完全清楚这个问题已经在所有地方得到了回答,无论是在SO还是在关闭.然而,每一次似乎有不同的答案,比如这个,这个和那个.

我不关心它是否使用jQuery - 重要的是它是有效的,并且是跨浏览器.

那么,预加载图像的最佳方法是什么？

在我的一个布局中,有一些大图像(来自XML)显示当我将鼠标悬停在某些链接上时,但是当页面加载时以及何时翻转它需要时间来加载该图像.

注意:有修复5张图片(非动态)

我不想使用JavaScript预加载图像任何解决方案？

我不使用悬停菜单或类似的东西,但这个图像是产品图像,链接是文本链接得到了我的观点？

Angular的ng-src保留了之前的模型,直到它在内部预加载图像.我在每个页面上为横幅使用不同的图像,当我切换路径时,我改变主视图,保持标题视图不变,只是在我拥有它时更改bannerUrl模型.

这导致在加载新的横幅图像时看到之前的横幅图像.

我很惊讶它还没有指令,但我想在尝试构建之前进行讨论.

我想要做的是我认为自定义属性上有横幅模型.喜欢:

<img preload-src="{{bannerUrl}}" ng-src="{{preloadedUrl}}">

然后$ scope.watch for bannerUrl更改,并且一改变,首先用loader spinner替换ng-src,然后创建temproary img dom元素,从preload-src预加载图像,然后将其分配到preloadUrl.

例如,需要考虑如何为画廊处理多个图像.

有人有任何意见吗？或者有人可以指出我现有的代码？

我已经在github上看到了使用背景图像的现有代码 - 但这对我不起作用,因为我需要动态高度/宽度,因为我的应用程序是响应式的,我不能用背景图像来做.

谢谢

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

第一个问题 - 尝试预加载/缓存那么多是愚蠢的吗？

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

该$.preLoadImages功能来自这里:http://binarykitten.me.uk/dev/jq-plugins/107-jquery-image-preloader-plus-callbacks.html

这是我实现它的方式:

$(document).ready(function() {
    setTimeout("preload()", 5000);
});
function preload() {
    var images = ['image1.jpg', ... 'image1000.jpg'];
    $.preLoadImages(images, function() { alert('done'); });
}

1000张图片很多.我问得太多了吗？

我有一个预加载器,它接受一系列图像URL,并在我的应用程序打开后立即开始加载文件.每次我在图像上使用require()时,我都希望webpack将该图像的URL添加到我的预加载器将使用的数组中.

我的第一个倾向是创建一个新的加载器与文件加载器(我目前用于图像)链接在一起.新的加载器将跟踪我的图像并将其保存到数组形式的JS文件中,我的预加载器将导入该文件.但我意识到这可能不会起作用,因为预加载器会依赖于在构建时生成的文件.

我的停止间隙解决方案是一次构建项目,从生成的图像目录生成数组,将其复制回预加载器,然后再次构建.

我觉得有一个更好的方法,我忽略了,我正在寻找建议.

我有以下代码,向用户显示他们尝试上传的图像的预览,并在FF中工作得非常好:

var img = document.createElement('img');
img.src = $('#imageUploader').get(0).files[0].getAsDataURL();

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

好吧,我对此失去了理智.我确实在这里阅读了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.

<div id="loading">
    <div id="waiting">
        <img class="loadingGif" src="images/loading.gif">            
    </div>
</div>

#loading
{
   background-size: 100%;
   background-color:#000;
   width: 100%;
   height: 100%;
   margin: 0px;
   padding: 0px;
   z-index:999;
}  

#waiting
{
   margin-left: auto;
   margin-right: auto;    
   position:absolute;
   top: 39%;
   left: 27.81%;
   width: 45%;
   height: 150px;    
   background-color: #FFF;
   border: 12px solid #FF771C; …

我无法找到有关如何制作javascript(或jquery)进度条的任何好信息,其中包含告诉您百分比的文本.

我不想插件,我只想知道它是如何工作的,这样我就可以根据我的需要进行调整.如何预加载图像并获取预加载图像数量的变量.另外,如何根据已加载的图像数量更改html/css和/或调用函数？

我正在开发一个图像预加载器,它将预加载页面上的所有图像.我的方法如下:

onDomReady,循环遍历$("*")//在DOM准备就绪时通过所有元素

• if $(this).tagName.toLowerCase() == 'img',read src属性和预加载该图像
• 否则$(this).css("background-image") != "none",请阅读背景图像道具并预加载该图像

我的问题是这种方法不适用于:hover类,它通常是需要预加载的图像.

我想要做的是,在循环遍历所有元素时,检查:hover伪类的存在,然后检查该类的"background-image"属性是否存在.

我真的很想坚持这种方法,因为它a)允许我不必明确指定我想要预加载的每个图像,以及b)处理CSS中的相对路径,如读取"background-image "属性为我提供了相对于页面的路径.

所以,我的问题是:

有可能,使用jQuery,读取元素的:hover伪类的CSS属性？如果没有,有什么建议吗？

谢谢!

我创建了一个包含多个图像的简单网页,但是当用户访问它时,浏览器会一次加载一个图像,而不是一次加载所有图像.

我想首先在页面中央显示"加载"gif,然后,当下载所有图像时,立即向用户显示整个网页.

我怎样才能做到这一点？