Я вставил отсрочку изображения на свои веб-страницы, но Google SpeedTest советует мне рассмотреть ленивую загрузку закадровых и скрытых изображений

Кнопка

имеет правую сторону стрелки вниз, и вы можете установить ее из конструктора:

ss [/g0]

С ShowMenuUnderCursor:

ss [/g1]

Класс MenuButton:

public class MenuButton : Button
{
    [DefaultValue(null)]
    public ContextMenuStrip Menu { get; set; }

    [DefaultValue(false)]
    public bool ShowMenuUnderCursor { get; set; }

    protected override void OnMouseDown(MouseEventArgs mevent)
    {
        base.OnMouseDown(mevent);

        if (Menu != null && mevent.Button == MouseButtons.Left)
        {
            Point menuLocation;

            if (ShowMenuUnderCursor)
            {
                menuLocation = mevent.Location;
            }
            else
            {
                menuLocation = new Point(0, Height);
            }

            Menu.Show(this, menuLocation);
        }
    }

    protected override void OnPaint(PaintEventArgs pevent)
    {
        base.OnPaint(pevent);

        if (Menu != null)
        {
            int arrowX = ClientRectangle.Width - 14;
            int arrowY = ClientRectangle.Height / 2 - 1;

            Brush brush = Enabled ? SystemBrushes.ControlText : SystemBrushes.ButtonShadow;
            Point[] arrows = new Point[] { new Point(arrowX, arrowY), new Point(arrowX + 7, arrowY), new Point(arrowX + 3, arrowY + 4) };
            pevent.Graphics.FillPolygon(brush, arrows);
        }
    }
}
1
задан Hookstark 27 February 2019 в 11:19
поделиться

1 ответ

Я бы порекомендовал использовать lozad.js + polyfill для отсрочки закадровых изображений (иначе говоря, ленивая загрузка). Я не читал статью о varvy, но кто-то написал, что этот метод откладывает загрузку изображений только после события onload, поэтому начальный вес загрузки страницы остается прежним.

Lozad не будет загружать изображение, пока его не прокрутят в окно просмотра.

Для <img> используйте пустое <svg> в качестве начального значения src, где 6 9 в viewBox ниже определяет соотношение между шириной (6) и высотой (9) => измените эти значения на соответствуют вашему контексту. Это обеспечит отсутствие перекомпоновки в макете страницы после загрузки изображений.

src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 9'%3E%3C/svg%3E"

Обратите внимание, что lozad.js использует Intersection Observer API, который все еще не поддерживает браузер, поэтому обязательно добавьте полифилл.

Удачи!

0
ответ дан Peter Svegrup 27 February 2019 в 11:19
поделиться
Другие вопросы по тегам:

Похожие вопросы: