标签: preloading

我有<img src="..." />一个默认src设置的标签.我想让jQuery做一个ajax请求来获取另一个图像,当这个新图像完全加载时,设置<img ... />标签的src,这样就没有闪烁.我不想做任何类似的预加载器new Image().src="foo".我真的很喜欢加载ajax请求的iamges.有任何想法吗？

我的CMS项目有一个时尚的Web 2.0登录屏幕,使用javascript在屏幕上消失.为什么即使我已经确保图像预先加载了120%(我在开发工具中使用了资源监视器),当我的登录屏幕出现时,它们仍然会显示一秒钟.它彻底摧毁了幻想!看一看:

http://www.dahwan.info/Melior (链接坏了)

单击登录时,屏幕应使用75%alpha 1px png图像淡入淡出.即使图像已预加载,也不会在动画完成后显示.但是,如果单击取消并再次登录,则动画流畅且完美.

谁能想到这个问题的解决方案？我也在使用CMS的其余GUI.这就像没有图像预加载那样的东西.

谢谢你的回答

编辑:啊,是的,我目前正在为谷歌Chrome 5.0.375.99开发此CMS,稍后会增加多浏览器兼容性.很抱歉让它离开

我试图找出为什么在画布中绘制之前经典的图像预加载方式是在chrome上触发"类型错误".

我们来看看情况:

我尝试以3种不同的方式预加载图像:

1. 创建一个新的Image()实例
2. 创建一个图像元素
3. 创建一个jQuery图像对象

或者如果你喜欢一些代码:

var canvas1 = document.getElementById('canvas-1'),
    context1 = canvas1.getContext('2d'),
    image1 = new Image(),
    canvas2 = document.getElementById('canvas-2'),
    context2 = canvas2.getContext('2d'),
    image2 = document.createElement('img'),
    $canvas3 = $('#canvas-3'),
    context3 = $canvas3.get(0).getContext('2d'),
    $image3 = $('<img>'),
    loadImage = function (image, context, debugIndice) {
        debugIndice = debugIndice || -1;
        image.onload = function () {
            try {
                context.drawImage(this, 0, 0, 100, 100);
            }
            catch (e) {
                console.log('error for debugIndice', debugIndice, e, this);
            }
        }
        image.src = "http://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png";
    };

loadImage(image1, context1, 1);
loadImage(image2, …

我正在为我的应用程序寻找 UI/CONTENT 加载器的解决方案，以加载带有内容的卡片。

我们正在使用 Angular，当卡片加载时，它们是空白和无聊的。试图以 Facebook 的方式为将使用它的人建立一些内容期望。他们做得很好。

这是屏幕截图的链接：

我知道有一些非常简单的解决方案，过去几个小时我一直在寻找各种“预加载器”，但我一直在寻找加载整个页面的方法。我希望只完成个别卡片本身，因为该应用程序从未真正“刷新”整个页面。

希望我已经很好地解释了（我是设计师）。

更新：这在 facebook 中发生得非常短暂

简单的问题 - Snapchat 故事如何加载如此之快，甚至当我“跳过”一个项目时，下一个总是准备好的？

Snapchat 故事是图像和视频的混合体，只要点击屏幕，下一个项目就会立即开始，无论是图像还是视频。我从未在应用程序中看到任何延迟，我想知道

他们是怎么做到的呢？一旦应用程序启动，他们是否会缓存所有内容（极不可能）？在您观看故事时，他们是否会持续预加载即将推出的项目？当我点击故事时，他们会加载所有内容吗？我不明白完美无瑕的内容流背后的“魔力”。另外：后端提供什么？资源清单？

有谁知道他们是如何做到的？Yeti 或 Fleek 等其他应用程序几乎都在做同样的事情，以同样完美的方式执行。我是一个相当不错的 iOS 开发人员，但我不知道这里使用的方法。

我对该rel="preload"属性感到很兴奋，因为它看起来可以帮助加快页面渲染时间。

该用例是一个首屏上方有大图像的网页。目前，Chrome 在获取 jQuery（一个相当重的文件）之后才会开始下载图像。启用预加载后，它们会并行下载。

但我正在阅读关于是否应该使用preload其他地方可见 HTML 元素中的内容（而不是通过用户交互使可见的内容，如下拉菜单）的相互矛盾的报告。

这篇文章似乎建议不要预加载：

何时不使用预加载：

• 当资产在同一页面上的其他地方被引用时。
• 当您不确定用户是否真的需要该资产时。就像在一个页面上，访问者只有 3% 的时间会去。

虽然这似乎表明它对于英国《金融时报》网站上的类似情况确实很有帮助：

当《金融时报》在其网站上引入链接预加载标头时，他们将显示标头图像所需的时间缩短了 1 秒......

那么是哪一个呢？我应该提供一个早期的“提示”来显示始终显示的首屏图像吗？或者我应该让浏览器按通常的顺序访问它？

我有个问题.我正在使用CMS,它的名字是Dolphin.简而言之,我创建了一个包含繁重代码的块(jQuery,javascript,php,HTML,图像等等).我想要做的是显示加载图像,直到该块的内容完全加载.因此,即使它看起来很奇怪,我也需要DIV的预加载功能.我需要这样做,因为如果我不使用它,我可以看到div组成缓慢,这太可怕了.你知道一个好的jQuery或javascript函数可以帮助我吗？只是在DIV中心加载图像,直到其内容完全加载.一旦它加载然后它将显示..谢谢!

我正在使用React Native构建我的第一个应用程序,这是一个包含很长图像列表的应用程序.我想在加载图像时显示微调器而不是图像.这听起来微不足道,但我没有找到解决方案.我认为对于我想要使用的微调器ActivityIndicatorIOS,但我如何将它与Image组件结合？

<Image source={...}>
  <ActivityIndicatorIOS />
</Image>

这是正确的方向吗？我错过了什么吗？

我测试了两种方法来在活动上方显示透明加载层（进度条），但活动内容被隐藏，这是第一个：

<RelativeLayout
  android:id="@+id/loadingPanel"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:gravity="center" >

  <ProgressBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:indeterminate="true" />
</RelativeLayout>

还有另一种风格的方法

<RelativeLayout
  style="@style/GenericProgressBackground"
  android:id="@+id/loadingPanel">
  <ProgressBar
    style="@style/GenericProgressIndicator"/>
</RelativeLayout>

<style name="GenericProgressBackground" parent="android:Theme">
  <item name="android:layout_width">fill_parent</item>
  <item name="android:layout_height">fill_parent</item>
  <item name="android:background">#DD111111</item>
  <item name="android:gravity">center</item>
</style>
<style name="GenericProgressIndicator"  arent="@android:style/Widget.ProgressBar.Small">
  <item name="android:layout_width">wrap_content</item>
  <item name="android:layout_height">wrap_content</item>
  <item name="android:indeterminate">true</item>
</style>

并隐藏或显示它

findViewById(R.id.loadingPanel).setVisibility(View.GONE);

（两者都作为根视图中的第一项添加）

但这两种方法都隐藏了活动，我希望像下图一样可见半透明，我该怎么做？

我有这个代码：

<ng-container [ngSwitch]="currentTab">
  <div [@ngSwitch]="'show'" *ngSwitchCase="1"><app-sub-search></app-sub-search></div>
  <div [@ngSwitch]="'show'" *ngSwitchCase="2"><app-filters></app-filters></div>
  <div [@ngSwitch]="'show'" *ngSwitchCase="3"><app-map></app-map></div>
</ng-container>

app-map包含谷歌地图和每一次我从一开始就切换到这个选项卡它的加载。我如何在这里关闭延迟加载，该地图将加载一次？