无法让LazyLoad和onerror一起处理图像 [英] Can't get LazyLoad and onerror to work together on an image

问题描述

我的页面上有一些图片:

I have some images on my page:

<img src="http://www.abc/images/abc.jpg" />

如果无法加载图片(例如，因为 abc.jpg 不存在)，那么我将显示默认"图片:

If the image can't be loaded (because abc.jpg doesn't exist, for example), then I show a "default" image instead:

<img src="http://www.abc/images/abc.jpg" onerror="this.src='http://www.abc/images/default.jpg'" /> 

如果我在图像中添加 LazyLoad 并加载更加轻巧的默认图像，它将变为:

If I add LazyLoad to my image and load an even more lightweight default image, it becomes:

<img
    class="lazy"
    data-original="http://www.abc/images/abc.jpg"  
    src="http://www.abc/images/graydefault.jpg"
    onerror="this.src='http://www.abc/images/default.jpg'" /> 

现在，页面加载时，它将首先加载轻量级图像，然后再加载实际图像.

Now, when the page loads, it will first load the lightweight image, before loading the actual image.

但是，如果实际图像不存在怎么办?轻量级的默认图像将保留在那里，但这不是我想要的:

But what happens if the actual image doesn't exist? The lightweight default image will stay there, but that's not what I want:

如何在错误时加载默认图像( default.jpg )?

How can I load my default image (default.jpg) on error?

PS:默认图像很重，因此我要避免将其作为默认图像加载.

PS: Default image is quite heavy, so I would like to avoid loading it as the default image.

推荐答案

在lazyload js中使用出现"选项.在延迟加载js中使用以下代码进行错误图像src加载

Use "appear" option in lazyload js. Use the following code in lazy load js for on-error image src loading

appear: function(ele,settings)
{
    $(ele).attr("src",$(ele).attr("data-original"));
}

当查看端口中有图像可用时，此功能将src替换为原始数据.如果未加载原始数据的图片网址，则会加载错误图片.

This function replaced src by data-original when image is avaible in view port. if data-original image url is not loaded, on-error image is loaded.

这篇关于无法让LazyLoad和onerror一起处理图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！