Question

Short version question : Is there navigator.mozIsLocallyAvailable equivalent function that works on all browsers, or an alternative?

<>0>

Hi, Here is my situation : I want to implement an HtmlHelper extension for asp.net MVC that handle image post-loading easily (using jQuery).

So i render the page with empty image sources with the source specified in the "alt" attribute. I insert image sources after the "window.onload" event, and it works great.

我这样做了:

$(window).bind( load , function() {
    var plImages = $(".postLoad");
    plImages.each(function() {
        $(this).attr("src", $(this).attr("alt"));
    });
});

www.un.org/Depts/DGACM/index_spanish.htm 问题在于:。在第一次装货之后,载后图像被加热。但是,如果该网页需要10秒钟才能装载,则在这10秒后将展示有卡的后载图像。

因此,如果图像能够立即显示,就想在“文件读物”活动中具体说明图像来源。

我发现这一职能:当地人如果有图像在海滩上,可以检查。这里是我用 j子做的:

//specify cached image sources on dom ready
$(document).ready(function() {
    var plImages = $(".postLoad");
    plImages.each(function() {
        var source = $(this).attr("alt")
        var disponible = navigator.mozIsLocallyAvailable(source, true);
        if (disponible)
            $(this).attr("src", source);
    });
});

//specify uncached image sources after page loading
$(window).bind( load , function() {
        var plImages = $(".postLoad");
        plImages.each(function() {
        if ($(this).attr("src") == "")
            $(this).attr("src", $(this).attr("alt"));
    });
});

该公司在“DOM”公司工作,但在任何其他公司工作。我尝试了导航器。当地雇员现有:相同结果。

是否有任何替代办法?

Answer 1

在进行了一些回击之后,我找到了解决办法:

The idea is to log the cached images, binding a log function on the images load event. I first thought to store sources in a cookie, but it s not reliable if the cache is cleared without the cookie. Moreover, it adds one more cookie to HTTP requests...

随后,我会见了:window. localStorage(,details

The localStorage attribute provides persistent storage areas for domains

事实上,我想要的是: 这一特性在超文本5中是标准化的,它已经在几乎所有最近的浏览器(FF、OM、Sissa、IE8、Mack)上运行。

这里是该法典(没有处理窗户、当地供应商不兼容的浏览器):

var storage = window.localStorage;
if (!storage.cachedElements) {
    storage.cachedElements = "";
}

function logCache(source) {
    if (storage.cachedElements.indexOf(source, 0) < 0) {
        if (storage.cachedElements != "") 
            storage.cachedElements += ";";
        storage.cachedElements += source;
    }
}

function cached(source) {
    return (storage.cachedElements.indexOf(source, 0) >= 0);
}

var plImages;

//On DOM Ready
$(document).ready(function() {
    plImages = $(".postLoad");

    //log cached images
    plImages.bind( load , function() {
        logCache($(this).attr("src"));
    });

    //display cached images
    plImages.each(function() {
        var source = $(this).attr("alt")
        if (cached(source))
            $(this).attr("src", source);
    });
});

//After page loading
$(window).bind( load , function() {
    //display uncached images
    plImages.each(function() {
        if ($(this).attr("src") == "")
            $(this).attr("src", $(this).attr("alt"));
    });
});

Answer 2

检查图像是否已经贴出最高效、简单和得到广泛支持的方法是:

Create an image object
Set the src property to the desired url
Check the completed attribute immediately to see if the image is already cached
Set the src attribute back to "" (empty string), so that the image is not unnecessarily loaded (unless of coarse you want to load it at this time)

和......

function isCached(src) {
    const img = new Image();
    img.src = src;
    const complete = img.complete;
    img.src = "";
    return complete;
}

如果是的话,可以这样执行。

const lazyImages = document.querySelectorAll(".postLoad");
for (const img of lazyImages) {
    if ((!img.src || !isCached(img.src)) && img.getAttribute("alt")) {
        img.src = img.getAttribute("alt");
    }
}

尽管如此,我建议不要为此目的使用斜体,而是应该使用<条码>数据-src。

Answer 3

如果播放画面有线索,就将几乎立即回去。然后使用规定时间来确定其是否准备就绪并取消请求,以便你日后重新排列。

<>Update:

var lqueue = [];
$(function() {
  var t,ac=0;
  (t = $("img")).each(
    function(i,e)
    {
      var rq = $.ajax(
      {
        cache: true,
        type: "GET",
        async:true,
        url:e.alt,
        success: function() { var rq3=rq; if (rq3.readyState==4) { e.src=e.alt; } },
        error: function() { e.src=e.alt; }
      });

      setTimeout(function()
      {
        var k=i,e2=e,r2=rq;
        if (r2.readyState != 4)
        {
          r2.abort();
          lqueue.push(e2);
        }
        if (t.length==(++ac)) loadRequeue();
      }, 0);
    }
  );
});

function loadRequeue()
{
  for(var j = 0; j < lqueue.length; j++) lqueue[j].src=lqueue[j].alt;
}

Answer 4

我对你空洞的图像来源表示赞扬。你写道:

因此,用“alt”属性中指明的源头向该页面提供空图像。我在“窗口.onload”活动之后插入图像来源,它发挥了巨大作用。

我过去曾遇到过这方面的问题,因为在有些浏览器中,空洞的<条码> rc属性引起额外要求。这里,他们做了些什么(从 Yahoo! Performance Rules , 也有 , 详细论述:

Internet Explorer makes a request to the directory in which the page is located.
Safari and Chrome make a request to the actual page itself.
Firefox 3 and earlier versions behave the same as Safari and Chrome, but version 3.5 addressed this issue[bug 444931] and no longer sends a request.
Opera does not do anything when an empty image src is encountered.

我们还在我们的网站上使用许多 j,并不总是能够避免空洞的形象标签。我选择使用1x1 px透明的gif,如:src=“t.gif”,供我只在上页后插入的图像使用。它规模很小,由浏览器 ca。这对我们来说非常成功。

Cheers, Oliver

Answer 5

比如,其他人可能会遇到同样的问题。这里提供的一些解决办法(即在当地浏览器数据储存中储存海滩)可能因两个原因中断。首先,如果图像的切片过期,其次,如果用户清除海滩的话。另一种做法是将图像来源确定给一名地方持有人。然后将来源改为图像途径/名称。这样,浏览器就有责任检查自己的海滩。应当与多数浏览者合作,而不管他们是怎样的。

Answer 6

页: 1 预报软件可以帮助你利用业绩资源核实。转让不动产。这种财产从服务器(未加列)下载时,应归还非零转移规模,如果从当地海滩上取回,则将退回零。

参考:https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceming/ transferSize

Answer 7

任何人如果试图用React I来解决这一问题,就使用complete图像财产,以这种方式解决:

import React, { useState, useEffect, useRef } from  react 

const Component= () => {
  const [isLoadedImage, setLoadedImage] = useState(false)
  const imageRef = useRef(null)

  useEffect(() => {
    const imgEl = imageRef.current
    if (imgEl && imgEl.complete && !isLoadedImage) setLoadedImage(true)
  })

  return (
    <img
      onLoad={() => (!isLoadedImage ? setLoadedImage(true) : null)}
      ref={imageRef}
    />
  )
}

友情链接