Question

我使用fancybox，很少有一些图像不会加载到用户。如何确保图像始终加载，如果不加载，我可以重新加载页面或其他内容？

Answer 1

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

Answer 2

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

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

var colorOfSomeImage = colorvalue
var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
var pixel = imageData.data;
imageExists = pixel ==

Answer 3

使用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
}

Answer 4

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

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

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

Answer 5

这有点棘手。你可以使用javascript fot任务。构建一个函数说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
 });

祝你在做什么都好运！

Answer 6

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

我之前遇到的一个问题是多次绑定了一个fancybox - 这会导致间歇性问题。

Answer 7

使用 Fiddler / FireFug 监控网络请求或使用Chrome内置工具（按F12并点击网络然后重新加载页面和监控器），无论对图片网址的请求是否正确并且是否已加载。我的意思是 200 OK状态或304 Not Modified（缓存）

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

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

希望这会有所帮助！

Answer 8

您可以使用课程将.error()-Funktion添加到所有图像。然后将Ajax-Call重新发送回服务器以检索缺少的源。

这样的事情：

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

然后：

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

For Ajax-Calls see the JQuery-Doc

图像有时不加载，如何确保它始终如一？的fancybox

8 个答案: