-2

我使用fancybox，很少有一些图像不会加载给用户。如何确保图像一直加载，如果没有，我可以重新加载页面或其他什么？

4

8 回答 8

6

您应该首先找出这些图像未加载的原因。使用 FireFox 的 FireBug 等开发人员工具或其他人的内置工具来监控网络活动。状态列应指示是否存在与服务器端相关的问题。

于 2012-11-13T10:34:18.660 回答
2

您可以将图像的像素数据保存x=1 y=1到变量中，然后确保它匹配，如果它不重新加载它。这仅在用户具有 html5 画布支持时才有效。在我看来，让每个用户的浏览器都运行起来是一种不必要的工作量。

这将为您提供所需的信息：

var colorOfSomeImage = colorvalue
var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
var pixel = imageData.data;
imageExists = pixel ==
于 2012-11-04T18:34:39.673 回答
2

javascript您可以执行以下操作来检查图像是否完全加载：

objImg = new Image();
objImg.src = 'photo.gif';
objImg.onload = function() {
                           /// do some work;
                        }
if(!objImg.complete)
 {
        /// do other work;
             }

您还可以使用图像onerror事件，例如：

<img src="image.gif" onerror="handleError(this);"> 
function handleError(image){
    //do some thing else
}
于 2012-11-11T18:25:04.580 回答
2

您可以设置fancybox的错误模板：

$('.fancybox').fancybox({
    tpl: {error: '<script>window.location = window.location;</script>'}
});

这样，如果图像加载失败，错误模板会重新加载页面。

于 2012-11-12T22:42:56.973 回答
1

这有点棘手。您可以使用 javascript 完成任务。构建一个函数说 loadImage：

$.fn.loadImage = function(fn){
    this.load(fn);
    this.each( function() {
        if ( this.complete && this.naturalWidth !== 0 ) {
            $(this).trigger('load');
        }
    });
}

上面的代码还涵盖了图像在脚本执行之前完成加载的情况。当您在标记中定义图像时，可能会发生这种情况。

<img src='http://example.com/img.png'/>

每当您想打开fancybox时触发以下javascript

$('img').loadImage(function(){
    //open fancybox
 });

无论你在做什么，祝你好运！

于 2012-11-11T18:48:35.780 回答
1

正如 Janis 所指出的，使用您的开发人员工具来监控 Net 部分 - 这可能是服务器端问题。

还有一个问题，我之前曾多次涉及绑定了一个fancybox——这会导致它出现间歇性问题。

于 2012-11-16T04:22:18.497 回答
1

使用Fiddler / FireFug或使用 Chrome 的内置工具监视网络请求（按 F12 并单击网络然后重新加载页面并监视），对图像 url 的请求是否正确以及它们是否被加载。我的意思是获得200 OK 状态或 304 Not Modified(Cache)

如果您遇到一些路径问题，请尝试使用“http://yoursite.com/images/img.jpg”之类的绝对路径并检查

确保您的服务器上存在所有图像，并且代理服务器没有阻止图像请求。

希望这会有所帮助！

于 2012-11-16T08:32:03.833 回答
1

您可以使用类将.error()-Funktion添加到所有图像。然后向服务器发出 Ajax-Call 以检索丢失的源。

像这样的东西：

<img src="image.gif" class="imageClass">

进而：

$.each($(".imageClass"), function(index, obj){
 $(obj).error(function() {
  //Your Ajax-Call
 }));
});

对于 Ajax 调用，请参阅 JQuery-Doc。

于 2012-11-18T11:27:48.097 回答