草庐IT

javascript - 在其他任何事情之前加载特定图像

coder 2023-08-02 原文

我正在为我正在制作的网站创建加载屏幕。该网站加载了许多图像、脚本等。HTML 和 CSS 部分很棒，但我需要一种方法来保证“正在加载...”图像将在其他任何内容之前加载。

我正在使用 jQuery，一切都在 $(function () { ... }); 中启动。我想这个代码需要在该 block 之前/之外调用，并且删除加载屏幕的代码将在该 block 的最后调用。目前，加载图像设置为 DIV 背景，这是我喜欢的方式。但是，如果完全有必要，我会选择 IMG 标签。

更新:(解决方案)

我能够结合 Robin 和 Vlad 的回答来回答我自己的问题。两者都是非常好的答案，但问题是它们的目的是在加载另一个图像之前加载一个图像，而不是在加载其他图像之前加载一个图像。 (CSS、JS 等...)

这是我想出的肮脏版本:

var files = [new Image(), document.createElement('link'), document.createElement('script')];
files[0].setAttribute('src', 'images/loading.gif');
files[1].setAttribute('rel', 'stylesheet');
files[1].setAttribute('type', 'text/css');
files[1].setAttribute('href', 'test.css');
files[2].setAttribute('type', 'text/javascript');
files[2].setAttribute('src', 'js/jquery-1.5.1.min.js');
window.onload = function (e) {
    document.getElementsByTagName('head')[0].appendChild(files[1]);
    document.getElementsByTagName('head')[0].appendChild(files[2]);
}

查看 Chrome 开发人员控制台网络选项卡上的加载顺序会发现首先加载“loading.gif”，然后是 4 个虚拟图像，然后是“test.css”，然后是“jquery.1.5.1”。 min.js'。 CSS 和 JS 文件不会开始加载，直到它们被插入到 head 标签中。这正是我想要的。

但是，当我开始加载文件列表时，我预测我可能会开始遇到一些问题。 Chrome 报告有时 JS 文件会先加载，但大多数情况下 CSS 文件会先加载。这不是问题，除非我开始添加要加载的文件时，我需要确保在使用 jQuery 的脚本文件之前加载 jQuery。

如果有人对此有解决方案，或者使用此方法检测 CSS/JS 文件何时完成加载的方法，请发表评论。不过，我不确定这是否会成为一个问题。如果我开始遇到问题，我可能需要在未来提出一个新问题。

感谢所有帮助解决此问题的人。

更新:(故障修复)

我最终使用这种方法遇到了很多问题，因为脚本文件是异步加载的。如果我清除浏览器缓存，然后加载页面，它将首先完成加载我的 jquery 依赖文件。然后，如果我刷新页面，它就会工作，因为 jquery 是从缓存中加载的。我通过设置要加载的文件数组，然后将加载脚本放入函数中来解决这个问题。然后，我将使用以下代码遍历每个数组项:

element.onload = function() { 
    ++i; _step();
}
element.onreadystatechange = function() { 
    if (("loaded" === element.readyState || "complete" === element.readyState)) { ++i; _step(); }
}

最佳答案

您可以重用资源预加载浏览器支持。

我不确定它是否适用于所有浏览器，但就我而言，这种方法有助于我首先加载图像。它还允许定义具体图像，因此可以跳过 UI 特定

首先在header中定义你想要预加载的资源并定义资源优先级

<link rel="preload" href="link-to-image" as="image">

或

<link rel="preload" href="link-to-image">

第二行允许增加所有对象类型(脚本/图像/样式)的加载优先级。第一行 - 仅通过图像。

然后像往常一样在正文中定义图像链接:

<img src="link-to-image" alt="">

这是我的工作示例 https://jsfiddle.net/vadimb/05scfL58/

关于javascript - 在其他任何事情之前加载特定图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7511352/

何事javascript39codesectionjqueryhtmlcss

有关javascript - 在其他任何事情之前加载特定图像的更多相关文章

  1. ruby - 其他文件中的 Rake 任务 - 2

    我试图在一个项目中使用rake，如果我把所有东西都放到Rakefile中，它会很大并且很难读取/找到东西，所以我试着将每个命名空间放在lib/rake中它自己的文件中，我添加了这个到我的rake文件的顶部:Dir['#{File.dirname(__FILE__)}/lib/rake/*.rake'].map{|f|requiref}它加载文件没问题，但没有任务。我现在只有一个.rake文件作为测试，名为“servers.rake”，它看起来像这样:namespace:serverdotask:testdoputs"test"endend所以当我运行rakeserver:testid时

  2. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  3. ruby - 如何在续集中重新加载表模式？ - 2

    鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

  4. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样？我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用，需要1秒才能返回，我有100,000多个页面要访问，所以我试图运行多个线程来解决这个问题。有更好的方法吗？classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  5. ruby - 如何在 Rails 4 中使用表单对象之前的验证回调？ - 2

    我有一个服务模型/表及其注册表。在表单中，我几乎拥有服务的所有字段，但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser

  6. ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项？ - 2

    我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常，直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co

  7. ruby - 调用其他方法的 TDD 方法的正确方法 - 2

    我需要一些关于TDD概念的帮助。假设我有以下代码defexecute(command)casecommandwhen"c"create_new_characterwhen"i"display_inventoryendenddefcreate_new_character#dostufftocreatenewcharacterenddefdisplay_inventory#dostufftodisplayinventoryend现在我不确定要为什么编写单元测试。如果我为execute方法编写单元测试，那不是几乎涵盖了我对create_new_character和display_invent

  8. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？ 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

  9. java - 我的模型类或其他类中应该有逻辑吗 - 2

    我只想对我一直在思考的这个问题有其他意见，例如我有classuser_controller和classuserclassUserattr_accessor:name,:usernameendclassUserController//dosomethingaboutanythingaboutusersend问题是我的User类中是否应该有逻辑user=User.newuser.do_something(user1)oritshouldbeuser_controller=UserController.newuser_controller.do_something(user1,user2)我

  10. ruby-on-rails - 从应用程序中自定义文件夹内的命名空间自动加载 - 2

    我们目前正在为ROR3.2开发自定义cms引擎。在这个过程中，我们希望成为我们的rails应用程序中的一等公民的几个类类型起源，这意味着它们应该驻留在应用程序的app文件夹下，它是插件。目前我们有以下类型:数据源数据类型查看我在app文件夹下创建了多个目录来保存这些:应用/数据源应用/数据类型应用/View更多类型将随之而来，我有点担心应用程序文件夹被这么多目录污染。因此，我想将它们移动到一个子目录/模块中，该子目录/模块包含cms定义的所有类型。所有类都应位于MyCms命名空间内，目录布局应如下所示:应用程序/my_cms/data_source应用程序/my_cms/data_ty

随机推荐