Question

我已经重新创建了一个蓝图，其中有60多个房间，作为内嵌SVG。

当您选择或悬停房间时，有些功能可以显示信息，例如图片。我使用一个<?php /** * @Filename: zendframework/module/Admin/config/module.config.php * The module required settings. * @author: your name here */ return [ 'controllers' => [ 'factories' => include __DIR__ . '/ControllerFactories.php' ], 'router' => [ 'routes' => include __DIR__ . '/DefineRoutes.php', ], 'view_manager' => ['template_path_stack' => [__DIR__ . '/../view',],], ];容器通过将其<?php /** * @Filename: zendframework/module/Admin/config/DefineRoutes.php * Declares site's admin routes * @author: your name here */ namespace Admin; use Zend\Router\Http\Segment; // first a couple of useful functions to make our life easy: // Creates a regexp to match all case-variants of a word function freeCaseExt($toCase){ $len = strlen($toCase); $out = ''; if($len < 1){ return $out; } for ($i=0; $i<$len; $i++){ $s = strtolower(substr($toCase, $i, 1)); $out .= '['.$s.strtoupper($s).']'; } return $out; } // To append slash child routes elsewhere function SlashUri($controller, $action){ return [ 'type' => \Zend\Router\Http\Literal::class, 'options' => [ 'route' => '/', 'defaults' => ['controller' => $controller, 'action' => $action ]]]; } $adminvariants = freeCaseExt('admin'); // to constrain our main route // Our route family tree: 'admin' => [ 'type' => Segment::class, 'options' => [ 'route' => '/:admin[/:case][/:casea][/:caseb][/:casec][/:cased][/:casee][/:casef][/:caseg][/:caseh]', 'constraints' => [ 'admin' => $adminvariants, 'case' => '[a-zA-Z0-9][a-zA-Z0-9_-]*', 'casea' => '[a-zA-Z0-9][a-zA-Z0-9_-]*', 'caseb' => '[a-zA-Z0-9][a-zA-Z0-9_-]*', 'casec' => '[a-zA-Z0-9][a-zA-Z0-9_-]*', 'cased' => '[a-zA-Z0-9][a-zA-Z0-9_-]*', 'casee' => '[a-zA-Z0-9][a-zA-Z0-9_-]*', 'casef' => '[a-zA-Z0-9][a-zA-Z0-9_-]*', 'caseg' => '[a-zA-Z0-9][a-zA-Z0-9_-]*', 'caseh' => '[a-zA-Z0-9][a-zA-Z0-9_-]*' ], 'defaults' => [ 'controller' => Controller\AdminController::class, 'action' => 'index' ] ], 'may_terminate' => TRUE, 'child_routes' => [ 'adminslash' => SlashUri(Controller\AdminController::class, 'index'), ] ], // Now you have declared all the posible admin routes with or without // slaches '/' at 9 deep levels using the AdminController::Index() method // to decide wath to do.属性设置为div来显示图片，如下所示。

background

我之所以没有使用url('path-of-image.ext')属性的简写，是因为我打算使用var cla = document.getElementsByClassName('cla'); for (i = 0; i < cla.length; i++) { cla[i].addEventListener('mouseenter', fun); } function fun(){ var str = 'url("media/' + this.id.slice(4) + '.jpg")'; pictureFrame.style.background = str; pictureFrame.style.backgroundSize = 'cover'; pictureFrame.style.backgroundPosition = 'center' }动画background属性。

但是，并非所有会议室都有图片。因此，当您选择或悬停所述会议室时，主机会抛出以下错误background-position。 该错误不会导致脚本中断，但我希望每次房间悬停时都不会运行该代码，即使给定的房间没有图片也是如此。

即使我知道这可以通过transition语句强制执行，但我尝试以编程方式执行此操作，因为有很多单独的房间。

我已尝试使用GET ... net::ERR_FILE_NOT_FOUND，但这似乎无法检测到此类错误。

有什么想法吗？

甚至可以检测到这种错误吗？

Answer 1

您可以尝试使用FileReader读取它并捕获/处理NotFoundError错误。

如果出错，您可以将其分配给您在悬停时首先检查的对象或数组。如果文件在该数组中，您可以避免再次尝试读取它，只是按照您喜欢的方式处理。

Nicholas Zakas使用FileReader

是一个很好的article

Answer 2

首先，我会看到是否有一种方法可以在文档加载之前检查文件是否存在，这样就不会发出不必要的请求。如果你在后端有一个可以管理这个的数据库，那么从长远来看，这将很好地为你服务

由于你的声音就像你只知道文件存在的方式是通过请求它，这里有一个方法可以让你try this：

function UrlExists(url)
{
    var http = new XMLHttpRequest();
    http.open('HEAD', url, false);
    http.send();
    return http.status!=404;
}

由于浏览器缓存，这不会请求图像两次。正如您所看到的那样，该方法本身正在被删除，总体而言，您可以解决此问题的最佳方法是在页面加载之前进行检查;如果您有任何类型的数据库或数据结构，则在图像存在与否时向该元素添加类或属性。然后，在现有方法中，您可以调用document.getElementsByClassName('cla-with-image')之类的内容来仅获取您已确定具有图像的记录（比尝试加载不存在的图像更有效）。

如果您最终使用该UrlExists方法，则只需将现有方法修改为

即可

function fun(){
  var url = "media/' + this.id.slice(4) + '.jpg";
  if (UrlExists(url)) {
      var str = 'url(' + url + ')';
      pictureFrame.style.background = str;
      pictureFrame.style.backgroundSize = 'cover';
      pictureFrame.style.backgroundPosition = 'center'
  }
}

仅使用JS检测net :: ERR_FILE_NOT_FOUND

2 个答案: